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