SVG绘制多边形

SVG绘制多边形

<svg xmlns="http://www.w3.org/2000/svg"
     width="100px" height="100px" viewBox="0 0 100 100">
    <!-- 平行四边形 -->
    <polygon points="15,10 55,10 45,20 5,20" style="fill:red;stroke:black;" />
    <!-- 五角星 -->
    <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1"
             style="fill:yellow;stroke:red;" />
    <!-- 不规则图形 -->
    <polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95"
             style="fill:yellow;fill-opacity:0.5;stroke:red;stroke-width:2" />
</svg>

SVG绘制多边形

<svg xmlns="http://www.w3.org/2000/svg"
     width="300px" height="100px" viewBox="0 0 300 100">
    <polygon points="48,16 16,96 96,48 0,48 80,96" style="stroke:black;fill:none;"/>
    <polygon points="148,16 116,96 196,48 100,48 180,96" 
             style="fill-rule:nonzero;stroke:black;fill:yellow;"/>
    <polygon points="248,16 216,96 296,48 200,48 280,96" 
             style="fill-rule:evenodd;stroke:black;fill:yellow;"/>
</svg>
上一篇:SVG中的路径


下一篇:SVG绘制矩形