SVG绘制矩形

2022-02-01 11:31:44 阅读：131 来源： 互联网

<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,矩形,绘制
来源： https://www.cnblogs.com/xl4ng/p/15858943.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SVG绘制矩形