第九天：如何用SVG绘制森林

旋转并不是我们从简单图形生成图像的唯一方法。在这个例子中，我们定义了一棵树的形状，然后将其放置在不同的位置，以不同的大小绘制出一片森林。

首先，我们用一个矩形和一个圆形创建一个背景。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <rect 
    x="-100" 
    y="-100" 
    width="200" 
    height="200" 
    fill="#F1DBC3"
  />
  <circle 
    cx="0" 
    cy="380" 
    r="350" 
    fill="#F8F4E8" 
  />
</svg>

然后，我们用一个简单的多边形和一条直线来定义树形。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <polygon 
    points="-10,0 10,0 0 -50" 
    fill="#38755b" 
  />
  <line 
    x1="0" 
    y1="0" 
    x2="0" 
    y2="10" 
    stroke="#778074"
    stroke-width="2" 
  />
</svg>

然后，我们就可以用雪花例子中的类似方法重复使用它。我们将其移至 defs 部分，将其封装到一个组元素中，为其设置一个 ID，然后用 use 元素重复使用它。

在这里，我们还通过设置 x 和 y 坐标来定位重复使用的元素，并使用scale 变换为图像添加透视效果。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <g id="tree">
      <polygon points="-10,0 10,0 0 -50" fill="#38755b" />
      <line x1="0" y1="0" x2="0" y2="10" stroke="#778074" stroke-width="2" />
    </g>
  </defs>

  <rect x="-100" y="-100" width="200" height="200" fill="#F1DBC3" />
  <circle cx="0" cy="380" r="350" fill="#F8F4E8" />

  <use href="#tree" x="-30" y="25" transform="scale(2)" />
  <use href="#tree" x="-20" y="40" transform="scale(1.2)" />
  <use href="#tree" x="40" y="40" />
  <use href="#tree" x="50" y="30" transform="scale(1.5)" />
</svg>
分享：