rx

rx 属性定义 X 轴上的半径。

您可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>

椭圆

对于 <ellipse>，rx 定义形状的 X 半径。如果值小于或等于零，则椭圆将不会绘制。

值	<length> \| <percentage> \| `auto`
默认值	`自动`
可动画	是

注意：<ellipse> 的 X 半径也可以使用 rx 几何属性 定义。如果在 CSS 中设置，则 rx 属性值将覆盖 rx 属性值。

矩形

对于 <rect>，rx 定义用于圆化矩形角的椭圆的 X 轴半径。

rx 属性值的解释方式取决于 ry 属性和矩形的宽度。

如果为 rx 提供了正确指定的数值，但未为 ry 提供（或反之），则浏览器将认为缺少的值等于已定义的值。
如果 rx 和 ry 都没有正确指定的值，则浏览器将绘制一个具有直角的矩形。
如果 rx 大于矩形宽度的一半，则浏览器将认为 rx 的值为矩形宽度的一半。

值	<length> \| <percentage> \| `auto`
默认值	`自动`
可动画	是

注意：<rect> 角的水平曲线也可以使用 rx 几何属性 定义。如果在 CSS 中设置，则 rx 属性值将覆盖 rx 属性值。

规范

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