ry

ry CSS 属性定义 SVG <ellipse> 的 y 轴（或垂直）半径，以及 SVG <rect> 矩形角的垂直曲线。如果存在，它将覆盖形状的 ry 属性。

注意：ry 属性仅适用于嵌套在 <svg> 中的 <ellipse> 和 <rect> 元素。它不适用于其他 SVG 元素或 HTML 元素或伪元素。

语法

css
/* 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

我们包含一个 SVG 图像，其中包含四个 <rect> 元素；所有矩形都相同，除了它们的 x 属性值，该值将它们沿 x 轴定位。

html
<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 值

css
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。

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

我们只为第一个椭圆设置样式，让它的孪生兄弟使用默认的用户代理样式（其中 fill 默认为黑色）。几何 ry 属性会覆盖 SVG ry 属性的值。我们还设置了 fill 和 stroke 属性，以区分带样式的形状及其孪生兄弟。

css
svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

结果

带样式的椭圆的垂直半径为 80px，如 CSS ry 属性值中定义的那样。未设置样式的椭圆的垂直半径为 20px，这是由 ry 属性定义的。

椭圆垂直半径百分比值

此示例演示了如何为 ry 使用百分比值。

HTML

我们使用与前一个示例相同的标记。

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 属性值；在这种情况下，我们使用百分比值。

css
svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

结果

当为 ry 使用百分比值时，这些值相对于 SVG 视口的高度。在这里，带样式的椭圆垂直半径的大小为当前 SVG 视口高度的 30%。由于高度默认为 150px，因此 ry 值为 45px，使椭圆的高度为 90px。

规范

规范
可缩放矢量图形 (SVG) 2
# RY

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅