<rect>
所述
<rect>元件是一个基本的SVG形状创建矩形，可以通过拐角的位置，它们的宽度和它们的高度限定。矩形的角可能会变圆。
一个例子：
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- Simple rect element --> <rect x="0" y="0" width="100" height="100" /> <!-- Rounded corner rect element --> <rect x="120" y="0" width="100" height="100" rx="15" ry="15" /></svg>
属性
的属性的
<rect>是元素如下：
x
：此属性确定矩形的x坐标。- 值类型：| ; 默认值：0 动画：是
y
：此属性确定矩形的y坐标。- 值类型：| ; 默认值：0 动画：是
width
：此属性确定矩形的宽度。- 值类型：自动|| ; 默认值：自动；动画：是
height
：此属性确定矩形的高度。- 值类型：自动|| ; 默认值：自动；动画：是
rx
：此属性确定矩形的水平角半径。- 值类型：自动|| ; 默认值：自动；动画：是
ry
：此属性确定矩形的垂直角半径。- 值类型：自动|| ; 默认值：自动；动画：是
pathLength
：此属性允许以用户单位指定路径的总长度。- 值类型： ; 默认值：无；动画：是
注意 ：从SVG2开始，x，y，宽度，高度，rx和ry是几何属性，这意味着这些属性也可以用作该元素的CSS属性。
这个用例
由于该
<rect>元素是 SVG
元素，因此要定位此类元素，您必须在使用xpath访问元素时明确指定SVG命名空间，如下所示：
对于
<svg>
元素：//*[name()="svg"]
对于
<g>
元素：//*[name()="svg"]/*[name()="g"]
对于
<rect>
元素：//*[name()="svg"]/*[name()="g"]/*[name()="rect"]
//[name()=”svg”]/[name()=”rect”]
