温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-08-31 13:33:27 来源:亿速云 阅读:193 作者:小新 栏目:web开发

这篇文章主要为大家展示了“如何使用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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

如何使用HTML5 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>

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

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

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

  • <svg> 元素

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

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

<svg viewBox="-50 -50 100 100">
  
</svg>
  • <path> 路径

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

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

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

以上是“如何使用HTML5 SVG绘制各种雪花图案”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI