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>
分享: |