例
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 半径を定義します。 値が 0 以下の場合、楕円はまったく描画されません。
| 値 |
<length>
|
<percentage>
| auto
|
|---|---|
| デフォルト値 | auto |
| アニメーション | 可 |
メモ:
<ellipse> の Y 半径は ry 幾何プロパティでも定義できます。CSS で設定された場合、ry プロパティの値は ry 属性の値よりも優先されます。
rect
<rect> において、ry は、矩形の角を丸めるために使用される楕円の X 軸方向の半径を定義します。
ry 属性の値の解釈方法は、rx 属性と矩形の幅の両方に依存します。
ryに対して適切な値が指定されているものの、rxに対しては指定されていない場合（またはその逆の場合）、ブラウザーは、指定されていない値を定義された方の値と同じものとみなします。ryにもrxにも適切な値が指定されていない場合、ブラウザーは角が直角の矩形を描画します。ryが矩形の幅の半分より大きい場合、ブラウザーはryの値を矩形の幅の半分として考えてみます。
| 値 |
<length>
|
<percentage>
| auto
|
|---|---|
| デフォルト値 | auto |
| アニメーション | 可 |
メモ:
<rect> の角の垂直方向の曲率は、ry 幾何プロパティでも定義できます。CSS で設定された場合、ry プロパティの値は ry 属性の値よりも優先されます。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RY |
関連情報
- CSS の
ryプロパティ