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