ry

例

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

<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 半径を定義します。 値が 0 以下の場合、楕円はまったく描画されません。

rect

<rect> において、ry は、矩形の角を丸めるために使用される楕円の X 軸方向の半径を定義します。

ry 属性の値の解釈方法は、rx 属性と矩形の幅の両方に依存します。

• ry に対して適切な値が指定されているものの、rx に対しては指定されていない場合（またはその逆の場合）、ブラウザーは、指定されていない値を定義された方の値と同じものとみなします。
• ry にも rx にも適切な値が指定されていない場合、ブラウザーは角が直角の矩形を描画します。
• ry が矩形の幅の半分より大きい場合、ブラウザーは ry の値を矩形の幅の半分として考えてみます。

仕様書

関連情報

• CSS の ry プロパティ