SVG绘制矩形

标签可用来创建矩形,通过它可绘制不同宽度高度圆角的矩形。

1.基本列子:

<svg xmlns="http://www.w3.org/2000/svg"  width="100%" height="100%">

<rect x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/>

</svg>

 

返回结果:

20150901143441

代码解释:

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

2.SVG矩形的位置由x和y属性决定。这个位置相对于最接近的父元素。

3.style 属性用来定义 CSS 属性。

其中:
fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值),当fill:none时填充色为透明;

stroke 属性定义一条线,如矩形边框的颜色或文本颜色;

stroke-width 属性定义矩形边框的宽度;如:stroke-width:1;

fill-opacity 属性定义填充颜色透明度(合法的范围是:0 – 1);

stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 – 1);

stroke-dasharray属性用于创建虚线,如stroke-dasharray: 10 5;虚线大小,间隔;

stroke-linecap定义开发路径的终端,如stroke-linecap=”butt”,”round”,”square”;

rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度,ry属性则决定圆角的高度。

2.圆角矩形:

利用rx,ry属性可以来绘制圆角矩形。

<svg xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="10" height="50" width="50"
rx="5" ry="5"
style="stroke:#006600; fill: #00cc00"/>
<rect x="70" y="10" height="50" width="50"
rx="10" ry="10"
style="stroke:#006600; fill: #00cc00"/>
<rect x="130" y="10" height="50" width="50"
rx="15" ry="15"
style="stroke:#006600; fill: #00cc00"/>
</svg>

返回结果:

 

20150901145325

 

3.描边矩形

 

<rect x="200" y="20" width="100" height="100"
style="stroke: #009900; stroke-width: 3;fill: none;"/>

</svg>

 

返回结果:

 

20150901145612

虚线描边:

<rect x="20" y="20" width="100" height="100"
style="stroke: #009900;
stroke-width: 3;
stroke-dasharray: 10 5;
fill: none;
"
/>

返回结果:

20150901165154