SVG系列教程01绘制SVG矩形

最新推荐文章于 2024-05-10 11:19:31 发布

web前端开发V

最新推荐文章于 2024-05-10 11:19:31 发布

阅读量366

点赞数 1

640?wx_fmt=jpeg

一个 <rect> 元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。

一个SVG矩形的简单例子

下面是一个绘制SVG矩形的简单例子。

<svg xmlns="http://www.w3.org/2000/svg">	
<rect x="10" y="10" height="100" 	
width="100"style="stroke:#006600; 	
fill: #00cc00"/></svg>

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

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

style 属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。

下面的图形是上面代码的返回结果：

圆角矩形

我们也可以绘制圆角的SVG矩形。 rx 和 ry 属性用于决定矩形圆角的大小。 rx 属性决定圆角的宽度， ry 属性则决定圆角的高度。下面的例子中，三个矩形的圆角分别被设置为5像素、10像素和15像素，请注意观察他们各自圆角的大小变化。

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

上面的代码的返回结果如下：

上面的例子中，三个圆角矩形的 rx 和 ry 值都是相同的。如果你单独设置了 rx 的值，那么 ry 的值和 rx 相同。这是定义SVG圆角矩形的简写方式。

下面的两个例子中， rx 的值都设置为10像素，但是 ry 的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。

<svg xmlns="http://www.w3.org/2000/svg">	
<rect x="10" y="10" height="50" 	
width="50"rx="10" ry="5"	
style="stroke:#006600; 	
fill: #00cc00"/>	
<rect x="130" y="10" height="50" 	
width="50"rx="10" ry="15"	
style="stroke:#006600; 	
fill: #00cc00"/></svg>

上面的代码的返回结果如下：

描边矩形

你可以使用 stroke 属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色，边框的宽度为3像素。

<rect x="20" y="20" width="100" height="100"/>

上面的代码的返回结果如下：

你还可以使用 stroke-dasharray 属性将矩形的边框设置为虚线。看下面的例子：

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

上面的代码的返回结果如下：

填充矩形

你可以使用 fill 属性来为SVG矩形填充颜色。例如将矩形的颜色填充为 none 。

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

这时，SVG矩形的填充色将和浏览器的页面颜色一样。

你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。

<rect x="20" y="20" width="100" 	
height="100"style="stroke: #009900;             	
fill: #33ff33;            "        />

最后，你可以用 fill-opacity 属性来设置填充矩形的透明度。下面的例子中，两个句子部分叠加在一起，上面的矩形设置为50%的填充透明度。

<rect x="20" y="20" width="100" 	
height="100"style="stroke: #009900;         	
fill: #33ff33;        "        	
/>	
<rect x="50" y="50" width="100" height="100"	
style="stroke: #000099;         	
fill: #3333ff;        	
fill-opacity: 0.5;        "        	
/>

上面的代码的返回结果如下：