y

構文

/* 寸法とパーセント値 */
y: 10px;
y: 10%;

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

値

<length> および <percentage> 値は、SVG 要素の左上角の Y 軸座標位置を表します。

<length>

絶対または相対の寸法として、CSS の <length> データ型で利用できる任意の単位で表すことができます。

<percentage>

パーセント値は、SVG の viewBox が宣言されている場合はその高さを参照し、宣言されていない場合は現在の SVG ビューポートの高さを参照します。

公式定義

形式文法

y = 
  <length-percentage>  

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

例

SVG 図形の Y 座標の定義

この例では、y の基本的な用途と、CSS の y プロパティが y 属性よりも優先される様子を示しています。

HTML

ここでは 4 つの同一の SVG <rect> 要素を記載しています。これらの要素の x および y 属性の値はすべて 10 であり、4 つの矩形はすべて、SVG ビューポートの左上角から 10px の位置に配置されています。

<svg>
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
</svg>

CSS

すべての矩形に黒い境界線を付けて、少し半透明に設定することで、重なり合った矩形が見えるようにしています。それぞれの矩形には、異なる fill と y 値を指定しています。

svg {
  border: 1px solid;
}

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  y: -20px;
  fill: red;
}

rect:nth-of-type(3) {
  y: 4em;
  fill: yellow;
}

rect:nth-of-type(4) {
  y: 60%;
  fill: orange;
}

結果

それぞれの矩形の上端は、それぞれ 10（属性による）、-20px、4em、60% の位置になります。矩形の高さは 40px ですので、-20px の場所では、赤い矩形の半分がビューポートの外側に配置されます。SVG の高さは 150px ですので、オレンジ色の矩形の上辺は、SVGビューポートの上端から 90px の位置になります。

仕様書

ブラウザーの互換性

See also

• SVG の y 属性
• 幾何プロパティ: y, cx, cy, r, rx, ry, x, width, height
• fill
• stroke
• paint-order
• <basic-shape> データ型