SVG绘制矩形

SVG绘制矩形

<svg xmlns="http://www.w3.org/2000/svg"
     width="200px" height="200px" viewBox="0 0 200 200">

    <!-- 内部填充为黑色,不绘制边框 -->
    <rect x="10" y="10" width="30" height="50"/>
    <!-- 内部不填充颜色,绘制黑色边框 -->
    <rect x="50" y="10" width="30" height="50" style="fill:none;stroke:black;"/>
    <!-- 内部填充为蓝色,绘制较粗、半透明红色边框 -->
    <rect x="90" y="10" width="30" height="50"
          style="fill:#0000ff;stroke:red;stroke-width:7;stroke-opacity:0.5"/>
    <!-- 内部填充为半透明的黄色,用虚线绘制绿色边框 -->
    <rect x="130" y="10" width="30" height="50"
          style="fill:yellow;fill-opacity:0.5;stroke:green;stroke-width:2;stroke-dasharray:5 2"/>

    <!-- 圆角矩形 -->
    <rect x="10" y="70" width="30" height="50" rx="2" ry="2" style="fill:none;stroke:black;"/>
    <rect x="50" y="70" width="30" height="50" rx="5" style="fill:none;stroke:black;"/>
    <rect x="90" y="70" width="30" height="50" ry="10" style="fill:none;stroke:black;"/>
    <rect x="130" y="70" width="30" height="50" rx="10" ry="5" style="fill:none;stroke:black;"/>
    <rect x="10" y="130" width="30" height="50" rx="10" ry="5" style="fill:none;stroke:black;"/>
    <rect x="50" y="130" width="30" height="50" rx="5" ry="10" style="fill:none;stroke:black;"/>
</svg>

上一篇:SVG绘制多边形


下一篇:SVG绘制线段