ry

ry 屬性定義了 y 軸上的半徑。

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

示例

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

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

ellipse

對於 <ellipse> 元素,ry 定義了形狀的 y 軸半徑。如果值為零或更小,則橢圓將完全不被繪製。

<length> | <percentage> | auto
預設值 auto
可動畫的

注意:<ellipse> 元素的 y 軸半徑也可以透過 ry 幾何屬性來定義。如果透過 CSS 設定,ry 屬性值將覆蓋 ry 屬性值。

rect

對於 <rect> 元素,ry 定義了用於圓角矩形角的橢圓的 y 軸半徑。

ry 屬性值的解釋方式取決於 rx 屬性以及矩形的寬度。

  • 如果為 ry 提供了有效值但未為 rx 提供值(反之亦然),則瀏覽器將把缺失的值視為與已定義的值相等。
  • 如果 ryrx 都沒有提供有效值,則瀏覽器將繪製一個具有直角的矩形。
  • 如果 ry 大於矩形寬度的一半,則瀏覽器會將 ry 的值視為矩形寬度的一半。
<length> | <percentage> | auto
預設值 auto
可動畫的

注意:<rect> 元素的垂直圓角也可以透過 ry 幾何屬性來定義。如果透過 CSS 設定,ry 屬性值將覆蓋 ry 屬性值。

規範

規範
Scalable Vector Graphics (SVG) 2
# RY

另見

  • CSS ry 屬性