第八天：如何用SVG画雪花

我们也可以为一个形状创建一个定义并重复使用，而不是一遍又一遍地重复相同的代码。在这里，我们定义了雪花的一个分叉，然后以不同的旋转方式使用了六次。

分支被定义为path。前面我们已经介绍了如何绘制基本路径。在这里，我们以类似的方式绘制分支。我们可以使用移动到 (M) 和直线到 (L) 命令来绘制一条简单的直线，即主分支：

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="M 0 0 L 0 -90"
    stroke="#E5C39C"
    stroke-width="5"
  />
</svg>

然后，我们可以继续绘制，并通过添加move-to和line-to命令来添加侧枝：

<svg 
  width="200" 
  height="200" 
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 0 L 0 -90 
      M 0 -20 L 20 -34"
    stroke="#E5C39C"
    stroke-width="5"
  />
</svg>

完成后的树枝将是这样的

<svg 
  width="200" 
  height="200" 
  viewBox="-100 -100 200 200"
>
  <path
    id="branch"
    d="
        M 0   0 L   0 -90
        M 0 -20 L  20 -34
        M 0 -20 L -20 -34
        M 0 -40 L  20 -54
        M 0 -40 L -20 -54
        M 0 -60 L  20 -74
        M 0 -60 L -20 -74"
    stroke="#E5C39C"
    stroke-width="5"
  />
</svg>

重复使用图像元素

然后，我们就可以把整个分支路径移到 defs 部分，并通过下面的 use 命令多次重复使用它。

然后，我们可以使用变换transform命令将各个分支移动到正确的位置，方法与星形例子相同。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path
      id="branch"
      d="
        M 0 0 L 0 -90
        M 0 -20 L 20 -34
        M 0 -20 L -20 -34
        M 0 -40 L 20 -54
        M 0 -40 L -20 -54
        M 0 -60 L 20 -74
        M 0 -60 L -20 -74"
      stroke="#E5C39C"
      stroke-width="5"
    />
  </defs>

  <use href="#branch" />
  <use href="#branch" transform="rotate(60)" />
  <use href="#branch" transform="rotate(120)" />
  <use href="#branch" transform="rotate(180)" />
  <use href="#branch" transform="rotate(240)" />
  <use href="#branch" transform="rotate(300)" />
</svg>
分享：