一个
<rect>
元素代表一个SVG矩形。通过这个元素你可以画出不同宽度,不同高度,以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。
一个SVG矩形的简单例子
SVG矩形的位置由
x
和
y
属性决定。请记住,这个位置是相对于任何它最接近的父元素的位置。
SVG矩形的尺寸由
width
和
height
属性决定。
style
属性允许你为矩形设置附加的样式,如描边色,描边宽度和填充色等。
圆角矩形
我们也可以绘制圆角的SVG矩形。
rx
和
ry
属性用于决定矩形圆角的大小。
rx
属性决定圆角的宽度,
ry
属性则决定圆角的高度。下面的例子中,三个矩形的圆角分别被设置为5像素、10像素和15像素,请注意观察他们各自圆角的大小变化。
上面的例子中,三个圆角矩形的
rx
和
ry
值都是相同的。如果你单独设置了
rx
的值,那么
ry
的值和
rx
相同。这是定义SVG圆角矩形的简写方式。
下面的两个例子中,
rx
的值都设置为10像素,但是
ry
的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。
描边矩形
你可以使用
stroke
属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色,边框的宽度为3像素。
你还可以使用
stroke-dasharray
属性将矩形的边框设置为虚线。看下面的例子:
填充矩形
你可以使用
fill
属性来为SVG矩形填充颜色。例如将矩形的颜色填充为
none
。
这时,SVG矩形的填充色将和浏览器的页面颜色一样。
你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。
最后,你可以用
fill-opacity
属性来设置填充矩形的透明度。下面的例子中,两个句子部分叠加在一起,上面的矩形设置为50%的填充透明度。