语法
/* Initial value */
ry: auto;
/* Length and percentage values */
ry: 30px;
ry: 30%;
/* Global values */
ry: inherit;
ry: initial;
ry: revert;
ry: revert-layer;
ry: unset;
值
<length>、<percentage> 或 auto 关键字值表示椭圆的垂直半径和矩形圆角的垂直边框半径。
<length>-
绝对或相对长度可以使用 CSS
<length>数据类型允许的任何单位表示。负值无效。 <percentage>-
百分比是指当前 SVG 视口的高度。
<rect>的使用值永远不会超过矩形高度的 50%。 auto-
当设置为或默认为
auto时，ry值等于用于rx的绝对长度值。如果ry和rx的计算值都为auto，则使用值为0。
正式定义
正式语法
ry =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
示例
创建圆角
此示例演示如何通过将 ry 属性应用于 SVG <rect> 元素来创建圆角矩形。
HTML
我们包含一个带有四个 <rect> 元素的 SVG 图像；所有矩形都相同，除了它们的 x 属性值，它将它们沿 x 轴定位。
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="120" y="5" x="5" />
<rect width="50" height="120" y="5" x="60" />
<rect width="50" height="120" y="5" x="115" />
<rect width="50" height="120" y="5" x="170" />
<rect width="50" height="120" y="5" x="225" />
</svg>
CSS
使用 CSS，我们为四个矩形设置了一个 ry 值
svg {
border: 1px solid;
}
rect:nth-of-type(2) {
ry: 10px;
fill: red;
}
rect:nth-of-type(3) {
ry: 2em;
fill: blue;
}
rect:nth-of-type(4) {
ry: 5%;
fill: orange;
}
rect:nth-of-type(5) {
ry: 80%;
fill: green;
}
结果
第一个矩形默认为 auto；由于此示例中的所有 rx 值也默认为 auto，因此 ry 的使用值为 0。红色和蓝色矩形分别具有 10px 和 2em 的圆角。由于 SVG 视口默认为 300px x 150px，橙色矩形的 5% 值创建了一个 7.5px 的半径。绿色矩形设置为 ry: 80%。然而，由于 ry 的值永远不会超过矩形高度的 50%，因此效果就像设置了 ry: 50%; rx: 50% 一样。
定义椭圆的垂直半径
这个基本的 <ellipse> 示例演示了 CSS ry 属性优先于 SVG ry 属性来定义形状的垂直半径。
HTML
我们在一个 SVG 中包含两个相同的 <ellipse> 元素；每个元素的 ry 属性都设置为 20。
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="40" ry="20" />
<ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>
CSS
我们只对第一个椭圆进行样式设置，让它的孪生兄弟使用默认用户代理样式（fill 默认为黑色）。几何 ry 属性会覆盖 SVG ry 属性的值。我们还设置了 fill 和 stroke 属性，以区分带样式的形状和它的孪生兄弟。
svg {
border: 1px solid;
}
ellipse:first-of-type {
ry: 80px;
fill: magenta;
stroke: rebeccapurple;
}
结果
带样式的椭圆的垂直半径为 80px，如 CSS ry 属性值中所定义。未带样式的椭圆的垂直半径为 20px，由 ry 属性定义。
椭圆垂直半径百分比值
此示例演示了对 ry 使用百分比值。
HTML
我们使用与上一个示例相同的标记。
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="40" ry="20" />
<ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>
CSS
CSS 与上一个示例相似，唯一的区别是 ry 属性值；在这种情况下，我们使用百分比值。
svg {
border: 1px solid;
}
ellipse:first-of-type {
ry: 30%;
fill: magenta;
stroke: rebeccapurple;
}
结果
当对 ry 使用百分比值时，这些值是相对于 SVG 视口高度的。此处，带样式的椭圆垂直半径的大小是当前 SVG 视口高度的 30%。由于高度默认为 150px，因此 ry 值为 45px，使椭圆高 90px。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # RY |
浏览器兼容性
加载中…
另见
- 几何属性：
ry、cx、cy、r、rx、x、y、height、height fillstrokepaint-orderborder-radius简写属性radial-gradient<basic-shape>数据类型- SVG
ry属性