使用HTML5 SVG绘制各种雪花图案

在之前的文章中我们介绍了利用HTML5+CSS3动态画出一个线条笑脸的方法,感兴趣的可以点击链接进行查阅→《如何使用HTML5+CSS3动态画一个笑脸》。这次我们继续聊聊利用HTML5 SVG绘制图案。

今天本文的主要内容是:利用HTML5 svg绘制各种雪花图案。

首先我们来了解一下什么是svg?

SVG是可伸缩矢量图形的缩写。它是一种图形格式,其中以XML指定形状。然后由SVG查看器呈现XML。如今,大多数Web浏览器都可以显示SVG,就像它们可以显示PNG,GIF和JPG一样。SVG用于二维矢量图形。

SVG 图像是使用各种元素创建的,这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素,svg 元素可以用于在当前文档(比如说,一个HTML文档)内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

下面我们来看看使用HTML5 SVG如何绘制各种雪花图案。

首先设置整个页面的背景颜色、svg画布的大小、线条的颜色、

body {
  background: #222;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
svg {
  width: 25vmin;
  height: 25vmin;
}
.stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

然后就开始利用svg绘制各种雪花图案

  • 定义svg标签,创建SVG图像的根元素,在当前文档内嵌套一个独立的svg片段;然后使用多个<path>标签绘制图案路径

  • 第一种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z transform=rotate(315)></path>
</svg>

图案越复杂,需要的<path>标签就越多

  • 第二种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z transform=rotate(337.5)></path>
</svg>

  • 第三种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z transform=rotate(337.5)></path>
</svg>

  • 第四种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z transform=rotate(315)></path>
</svg>

  • 第五种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z transform=rotate(315)></path>
</svg>

  • 第六种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(30)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(60)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(120)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(150)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(210)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(240)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(300)></path>
  <path class=stroke d=M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z transform=rotate(330)></path>
</svg>

  • 第七种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(30)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(60)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(120)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(150)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(210)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(240)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(300)></path>
  <path class=stroke d=M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z transform=rotate(330)></path>
</svg>

  • 第八种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z transform=rotate(315)></path>
</svg>

  • 第九种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z transform=rotate(337.5)></path>
</svg>

  • 第十种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z transform=rotate(337.5)></path>
</svg>

  • 第十一种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(30)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(60)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(120)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(150)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(210)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(240)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(300)></path>
  <path class=stroke d=M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z transform=rotate(330)></path>
</svg>

  • 第十二种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(30)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(60)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(120)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(150)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(210)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(240)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(300)></path>
  <path class=stroke d=M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z transform=rotate(330)></path>
</svg>

  • 第十三种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z transform=rotate(337.5)></path>
</svg>

  • 第十四种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z transform=rotate(315)></path>
</svg>

  • 第十五种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(30)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(60)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(120)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(150)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(210)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(240)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(300)></path>
  <path class=stroke d=M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z transform=rotate(330)></path>
</svg>

  • 第十六种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z transform=rotate(315)></path>
</svg>

  • 第十七种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z transform=rotate(337.5)></path>
</svg>

  • 第十八种雪花图案

<svg viewBox=-50 -50 100 100>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(0)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(22.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(45)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(67.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(90)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(112.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(135)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(157.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(180)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(202.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(225)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(247.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(270)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(292.5)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(315)></path>
  <path class=stroke d=M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z transform=rotate(337.5)></path>
</svg>

大家可以直接复制以上代码,在本地进行运行演示。

这里给大家介绍几个关键的标签和属性:

  • <svg> 元素

SVG 图像是使用各种元素创建的,这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素,svg 元素可以用于在当前文档(比如说,一个HTML文档)内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

所有SVG图像的根元素都是 <svg>元素。

<svg viewBox=-50 -50 100 100>
  
</svg>
  • 98953a78f52873edae60a617ec082494 路径

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG 98953a78f52873edae60a617ec082494元素用于绘制由直线,圆弧,曲线等组合而成的高级形状,带或不带填充。该 98953a78f52873edae60a617ec082494元素可能是所有元素中最先进,最通用的SVG形状。它可能也是最难掌握的元素。

所有带有98953a78f52873edae60a617ec082494元素的绘图都在d属性中指定。 d属性包含绘图命令。

98953a78f52873edae60a617ec082494d属性中的第一个绘图命令应该始终是move命令。在你可以画任何东西之前,你应该把虚拟笔移到某个地方。这是使用M命令完成的。

PHP中文网平台有非常多的视频教学资源,欢迎大家学习《HTML视频教程》!

以上就是使用HTML5 SVG绘制各种雪花图案的详细内容,更多请关注双恒网络其它相关文章!

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

云资源网 » 使用HTML5 SVG绘制各种雪花图案

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
你们有qq群吗怎么加入?
当然有的,如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://sudo1.com/page-qun.html。
  • 会员数(个)
  • 12275资源数(个)
  •        
  • 资源(G)
  •        
  • 今日下载
  • 1364稳定运行(天)

提供最优质的资源集合

立即查看 了解详情