当前位置: 首页 > 编程笔记 >

如何在HTML5 SVG中画星星?

晋承运
2023-03-14
本文向大家介绍如何在HTML5 SVG中画星星?,包括了如何在HTML5 SVG中画星星?的使用技巧和注意事项,需要的朋友参考一下

SVG代表可伸缩矢量图形,是一种用于描述XML中的2D图形和图形应用程序的语言,然后由SVG查看器呈现XML。大多数网络浏览器可以显示SVG,就像显示PNG,GIF和JPG一样。

要在HTML SVG中绘制多边形,请使用SVG <polygon>元素。<polygon>元素创建一个至少包含三个侧面的图形。要在HTML5 SVG中绘制星形,您需要为每个角正确设置x和y坐标。

示例

您可以尝试运行以下代码,以了解如何在HTML5 SVG中绘制星形:

<!DOCTYPE html>
   <html>
      <head>
         <style>
            #svgelem {
               position: relative;
               left: 10%;
               -webkit-transform: translateX(-20%);
               -ms-transform: translateX(-20%);
               transform: translateX(-20%);
            }
         </style>
      <title>HTML5 SVG Polygon Star</title>
   </head>
   <body>
      <h2>HTML5 SVG Star</h2>
         <svg id = "svgelem" width = "300" height = "300" xmlns = "http://www.w3.org/2000/svg">
            <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
         </svg>
   </body>
</html>
 类似资料:
  • 本文向大家介绍Silverlight实现星星闪烁动画,包括了Silverlight实现星星闪烁动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Silverlight实现星星闪烁动画展示的具体代码,供大家参考,具体内容如下 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成。  1、创建图形数组并设置背景透明,渐变笔触,大小等,

  • 我想在D3中画一个棋盘: 我会满足于仅仅能够画出初始的游戏位置(如上)。 可能不需要king、queen、knight等的图像文件(有12个不同的部分),因为它们都是Unicode的一部分,作为代码点2654-265f: Unicode字符出现在任何现代浏览器中: 这是一个很好的例子 这是一个很好的例子 任何指示或帮助将非常感谢。

  • 我在数据帧中有两个映射类型列。有没有一种方法可以通过使用.withColumn在spark Sql中合并这两个列来创建新的映射列?

  • 在我的应用程序中,我想在ImageView上画一条线。当我触摸它时,我想用手指写一条线。这是我的要求。为此,我谷歌了很多次,并休耕了贝娄链接: 如何在Android上的ImageView中画一条线?。 在我的活动中,我创建了MyImageView类的对象,在我的OnTouchListener中重写了onTouch()方法,在MotionEvent.action_down:switch case中,

  • 实际上,我有一个,它是(在和),现在我需要创建另一个(在该的下方),一开始必须不可见。 当我的活动运行时,我想对隐藏的布局进行动画处理。 隐藏的必须自下而上。我不知道如何实现这个动画??我不知道如何创建一个最初不可见的布局,经过一段时间的延迟后,它必须从屏幕下方显示并从侧面显示??? 这是我的xml文件代码

  • 您知道吗?您可以使用 iPad 或 iPhone,从赋予您灵感的任何照片内容中设计出精美的高品质画笔。将画笔存储到您的 Creative Cloud 库中,然后便可在 Photoshop 和 Illustrator 中的任意位置访问它们! 若要了解有关 Adobe Brush CC iPad 应用程序的更多信息,请观看这段视频。 可从 iTunes App Store 下载功能强大的 Adobe