rx

rx 屬性定義 X 軸上的半徑。

您可以將此屬性與以下 SVG 元素一起使用

示例

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 提供(或反之),則瀏覽器將認為缺少的值等於已定義的值。
  • 如果 rxry 都沒有正確指定的值,則瀏覽器將繪製一個具有直角的矩形。
  • 如果 rx 大於矩形寬度的一半,則瀏覽器將認為 rx 的值為矩形寬度的一半。
<length> | <percentage> | auto
預設值 自動
可動畫

注意:<rect> 角的水平曲線也可以使用 rx 幾何屬性 定義。如果在 CSS 中設定,則 rx 屬性值將覆蓋 rx 屬性值。

規範

規範
可縮放向量圖形 (SVG) 2
# RX