ry プロパティ (CSS)

構文

/* 初期値 */
ry: auto;

/* 長さとパーセント値 */
ry: 30px;
ry: 30%;

/* グローバル値 */
ry: inherit;
ry: initial;
ry: revert;
ry: revert-layer;
ry: unset;

値

<length>、<percentage>、またはキーワード値 auto で楕円の垂直半径および矩形の角の垂直方向の曲率を指定します。

<length>

絶対長または相対長であり、CSS の <length> データ型で許可されている任意の単位で表すことができます。負の値は無効です。

<percentage>

現在の SVG ビューポートの高さを基準としたパーセント値です。<rect> の場合の使用値は、矩形の高さの 50% を超えることはありません。

auto

auto に設定された場合、またはデフォルト値が auto の場合、ry の値は rx で使用される絶対長に等しくなります。ry と rx の両方の計算値が auto である場合、使用値は 0 になります。

公式定義

形式文法

ry = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

例

丸い角の作成

この例では、ry プロパティを SVG の <rect> 要素に適用して、角が丸い矩形を作成する方法を示しています。

HTML

SVG 画像をに 5 つの <rect> 要素を配置しています。これらの矩形はすべて同じですが、x 属性の値のみが異なり、この値によって X 軸に沿って配置されます。

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="50" height="120" y="5" x="5" />
  <rect width="50" height="120" y="5" x="60" />
  <rect width="50" height="120" y="5" x="115" />
  <rect width="50" height="120" y="5" x="170" />
  <rect width="50" height="120" y="5" x="225" />
</svg>

CSS

CSS では、4 つの矩形に ry 値を設定します。

svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  ry: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  ry: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  ry: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  ry: 80%;
  fill: green;
}

結果

最初の矩形はデフォルトで auto になります。この例ではすべての rx 値もデフォルトで auto であるため、ry の使用値は 0 となります。赤と青の矩形は、それぞれ 10px および 2em の角丸が設定されています。SVG ビューポートのデフォルトサイズは 300px × 150px であるため、オレンジ色の矩形の 5% という値により、角には半径 7.5px の丸みが生成されます。緑色の矩形には ry: 80% が設定されています。しかし、ry の値は矩形の高さの 50% を超えることはないため、その効果は ry: 50%; rX: 50% が設定された場合と同じになります。

楕円の垂直半径の定義

これは基本的な <ellipse> の例で、図形の垂直半径を定義する際、CSS の ry プロパティが SVG の ry 属性よりも優先されることを示しています。

HTML

SVG 内に、2 つの同一の <ellipse> 要素を配置します。それぞれ ry 属性を 20 に設定します。

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="40" ry="20" />
  <ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>

CSS

1 つ目の楕円だけにスタイル設定し、対になるもう 1 つにはユーザーエージェントのデフォルトスタイルを使用します（fill はデフォルトで黒になります）。 ry は幾何プロパティなので、SVG の ry 属性の値を上書きします。同時に、スタイルが適用された図形と対となる図形を区別するために、fill プロパティと stroke プロパティも設定しています。

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

結果

スタイルが適用された楕円の垂直半径は、CSS の ry プロパティの数値で定義されている通り、80px です。スタイルが適用されていない楕円の垂直半径は、ry 属性で定義された通り、20px です。

楕円の垂直半径のパーセント値

この例では、ry にパーセント値を使用する方法を示しています。

HTML

We use the same markup as the previous example.

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="40" ry="20" />
  <ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>

CSS

CSS は前の例と似ていますが、唯一の違いは ry プロパティの値です。この例では、パーセント値を使用しています。

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

結果

ry にパーセント値を使用する場合、その値は SVG ビューポートの高さを基準とします。ここでは、スタイルが適用された楕円の垂直半径のサイズは、現在の SVG ビューポートの高さの 30% になります。高さのデフォルト値は 150px であるため、ry の値は 45px となり、楕円の高さは 90px となります。

仕様書

ブラウザーの互換性

関連情報

• 幾何プロパティ: ry, cx, cy, r, rx, x, y, height, height
• fill
• stroke
• paint-order
• border-radius 一括指定プロパティ
• radial-gradient
• <basic-shape> データ型
• SVG ry 属性