SVG基础----绘制SVG矩形

1、绘制svg矩形

<svg>
     <rect x="10" y="10" width="100" height="100" style="stroke: #212121;fill: #27AE60;"></rect>
</svg>

注：SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。

　　SVG矩形的尺寸由width和height属性决定。

2、圆角矩形

也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。

        <svg>
            <rect x="10" y="10" width="100" height="100" rx="5" rx="5" style="stroke: #212121;fill: #27AE60;"></rect>
        </svg>

3、描边矩形

<svg>
     <rect x="10" y="10" width="100" height="100" rx="15" 
　　　　style="stroke: #212121;
　　　　　　　　stroke-width: 10;
　　　　　　　　fill: none;">
　　　</rect>
</svg>

可以使用stroke-dasharray属性将矩形的边框设置为虚线

<svg>
<rect x="10" y="10" width="100" height="100" rx="15" 
　　style="stroke: #212121;
　　　　　　stroke-width: 10;
　　　　　　stroke-dasharray: 4;
　　　　　　fill: none;">
</rect>
</svg>

4、填充矩形

可以使用fill填充矩形颜色

<svg>
　　<rect x="10" y="10" width="100" height="100" rx="15" 
　　　　style="stroke: #212121;
　　　　stroke-width: 10;
　　　　fill: #1D7DB1;">
　　</rect>
</svg>

可以用fill-opacity属性来设置填充矩形的透明度

<svg>
　　<rect x="0" y="0" width="100" height="100" style="stroke: #212121;stroke-width: 1;fill: #1D7DB1;fill-opacity: 1;"></rect>
　　<rect x="50" y="50" width="100" height="100" style="stroke: #212121;stroke-width: 1;fill: #27AE60;fill-opacity: .6;"></rect>
</svg>