第2天：如何使用SVG绘制圣诞树

如何使用 polygon 元素

我们不能总是使用基本形状来组合我们的图像。polygon是绘制自由形状的最简单方法。多边形有一个points属性，用于设置用直线连接的坐标列表。

我们可以从三个三角形中得到树冠。我们从最下面的开始，一层一层地添加。

<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <polygon 
    points="0,0 80,120 -80,120" 
    fill="#234236" 
  />
</svg>
<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <polygon 
    points="0,0 80,120 -80,120" 
    fill="#234236" 
  />
  <polygon
    points="0,-40 60,60 -60,60"
    fill="#0C5C4C" 
  />
</svg>
<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <polygon 
    points="0,0 80,120 -80,120" 
    fill="#234236" 
  />
  <polygon
    points="0,-40 60,60 -60,60"
    fill="#0C5C4C" 
  />
  <polygon 
    points="0,-80 40,0 -40,0"
    fill="#38755B" 
  />
</svg>

最后，我们将树干添加为矩形。

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <polygon points="0,0 80,120 -80,120" fill="#234236" />
  <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
  <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
  <rect x="-20" y="120" width="40" height="30" fill="brown" />
</svg>
分享：