示例
html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" ry="0" rx="25" />
<ellipse cx="150" cy="50" ry="25" rx="25" />
<ellipse cx="250" cy="50" ry="50" rx="25" />
<rect x="20" y="120" width="60" height="60" ry="0" rx="15" />
<rect x="120" y="120" width="60" height="60" ry="15" rx="15" />
<rect x="220" y="120" width="60" height="60" ry="150" rx="15" />
</svg>
ellipse
对于 <ellipse>
元素,ry
定义了形状的 y 轴半径。如果值为零或更小,则椭圆将完全不被绘制。
值 |
<length> | <percentage> | auto |
---|---|
默认值 | auto |
可动画的 | 是 |
注意:<ellipse>
元素的 y 轴半径也可以通过 ry
几何属性来定义。如果通过 CSS 设置,ry
属性值将覆盖 ry
属性值。
rect
对于 <rect>
元素,ry
定义了用于圆角矩形角的椭圆的 y 轴半径。
ry
属性值的解释方式取决于 rx
属性以及矩形的宽度。
- 如果为
ry
提供了有效值但未为rx
提供值(反之亦然),则浏览器将把缺失的值视为与已定义的值相等。 - 如果
ry
和rx
都没有提供有效值,则浏览器将绘制一个具有直角的矩形。 - 如果
ry
大于矩形宽度的一半,则浏览器会将ry
的值视为矩形宽度的一半。
值 |
<length> | <percentage> | auto |
---|---|
默认值 | auto |
可动画的 | 是 |
注意:<rect>
元素的垂直圆角也可以通过 ry
几何属性来定义。如果通过 CSS 设置,ry
属性值将覆盖 ry
属性值。
规范
规范 |
---|
Scalable Vector Graphics (SVG) 2 # RY |
另见
- CSS
ry
属性