y
=

**`y`** 属性はユーザー座標系の Y 軸の座標を定義します。

この属性は、以下の SVG 要素で使用することができます。

* `<altGlyph>`
* `<cursor>` (en-US)
* `<feBlend>` (en-US)
* `<feColorMatrix>`
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDropShadow>`
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>`
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<foreignObject>`
* `<glyphRef>` (en-US)
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>` (en-US)
* `<text>`
* `<tref>` (en-US)
* `<tspan>`
* `<use>`
例
-
```

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



```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="20" x="20" width="60" height="60" />
  <rect y="120" x="20" width="60" height="60" />
  <rect y="220" x="20" width="60" height="60" />
</svg>
```

altGlyph
--------

**警告:** SVG2 では `<altGlyph>` は非推奨であるため、使用しないでください。

`<altGlyph>` の場合、 `y` は代替文字の Y 軸の座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 のリスト
  |
| 既定値 | *なし* |
| アニメーション | 可 |

feBlend
-------

`<feBlend>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feColorMatrix
-------------

`<feColorMatrix>` の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feComponentTransfer
-------------------

`<feComponentTransfer>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feComposite
-----------

`<feComposite>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feConvolveMatrix
----------------

`<feConvolveMatrix>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feDiffuseLighting
-----------------

`<feDiffuseLighting>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feDisplacementMap
-----------------

`<feDisplacementMap>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feDropShadow
------------

`<feDropShadow>` の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feFlood
-------

`<feFlood>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feFuncA
-------

`<feFuncA>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feFuncB
-------

`<feFuncB>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feFuncG
-------

`<feFuncG>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feFuncR
-------

`<feFuncR>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feGaussianBlur
--------------

`<feGaussianBlur>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feImage
-------

`<feImage>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feMerge
-------

`<feMerge>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feMergeNode
-----------

`<feMergeNode>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feMorphology
------------

`<feMorphology>` の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feOffset
--------

`<feOffset>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

fePointLight
------------

`<fePointLight>` (en-US) の場合、 `y` は `<filter>` (en-US) 要素の `primitiveUnits (en-US)` 属性で定義される座標系での光源の Y 位置を定義します。

|  |  |
| --- | --- |
| 値 | **<number>** |
| 既定値 | `0` |
| アニメーション | 可 |

feSpecularLighting
------------------

`<feSpecularLighting>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feSpotLight
-----------

`<feSpotLight>` (en-US) の場合、 `y` は `<filter>` (en-US) 要素の `primitiveUnits (en-US)` 属性で定義される座標系での光源の Y 位置を定義します。

|  |  |
| --- | --- |
| 値 | **<number>** |
| 既定値 | `0` |
| アニメーション | 可 |

feTile
------

`<feTile>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

feTurbulence
------------

`<feTurbulence>` (en-US) の場合、 `y` はこのプリミティブの描画領域における最小の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0%` |
| アニメーション | 可 |

filter
------

`<filter>` (en-US) の場合、 `y` はこのフィルターの描画領域における左上隅の Y 座標をを定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `-10%` |
| アニメーション | 可 |

foreignObject
-------------

`<foreignObject>` の場合、 `y` はこのフィルターの描画領域における左上隅の Y 座標をを定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | 可 |

**メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は `<foreignObject>` の CSS プロパティとして使用することもできます。

glyphRef
--------

**警告:** SVG2 では `<glyphRef>` (en-US) は非推奨であり、使用すべきではありません。

`<glyphRef>` (en-US) の場合、 `y` が文字の Y 軸の座標を定義します。

|  |  |
| --- | --- |
| 値 | **<number>** |
| 既定値 | *なし* |
| アニメーション | 可 |

image
-----

`<image>` の場合、 `y` はこの画像の左上隅の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | 可 |

**メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は画像用の CSS プロパティとしても使用できます。

mask
----

`<mask>` の場合、 `y` は、その影響する領域の左上隅の Y 座標を定義します。この属性の正確な効果は、 `maskUnits (en-US)` 属性に影響されます。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `-10%` |
| アニメーション | 可 |

pattern
-------

`<pattern>` の場合、 `y` はタイルパターンの左上隅の Y 座標を定義します。この属性の正確な効果は、 `patternUnits` と `patternTransform (en-US)` 属性に影響されます。

|  |  |
| --- | --- |
| 値 | **<length>** |
| 既定値 | `0` |
| アニメーション | 可 |

rect
----

`<rect>` の場合、 `y` は図形の左上隅の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | 可 |

**メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は矩形の CSS プロパティとして使用することもできる。

svg
---

`<svg>` の場合、 `y` はそのビューポートの左上隅の Y 座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | 可 |

**メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は `<svg>` の CSS プロパティとして使用することもできます。

text
----

`<text>` にある値が 1 つの場合、 `y` は*コンテンツテキストの位置*を配置しなければならない Y 座標を定義します。*コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置*は、 `text-anchor (en-US)` や `direction` など、他のプロパティの影響を受けます。

複数の値がある場合、`y` はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

|  |  |
| --- | --- |
| 値 | 
 (**<length>**
 |
 **<percentage>**) のリスト
  |
| 既定値 | `0` |
| アニメーション | 可 |
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <!-- y with a single value -->
  <text y="40%" x="5%">SVG</text>

  <!-- y with multiple values -->
  <text y="40%,60%,80%" x="55%">SVG</text>
</svg>
```



```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

tref
----

**警告:** SVG2 では `<tref>` (en-US) は非推奨であり、使用すべきではありません。

`<tref>` (en-US) にある値が 1 つの場合、 `y` は*コンテンツテキストの位置*を配置しなければならない Y 座標を定義します。*コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置*は、 `text-anchor (en-US)` や `direction` など、他のプロパティの影響を受けます。

複数の値がある場合、`y` はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

|  |  |
| --- | --- |
| 値 | 
 (**<length>**
 |
 **<percentage>**) のリスト
  |
| 既定値 | `0` |
| アニメーション | 可 |

tspan
-----

`<tspan>` にある値が 1 つの場合、 `y` は*コンテンツテキストの位置*を配置しなければならない Y 座標を定義します。*コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置*は、 `text-anchor (en-US)` や `direction` など、他のプロパティの影響を受けます。

複数の値がある場合、`y` はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

|  |  |
| --- | --- |
| 値 | 
 List of (**<length>**
 |
 **<percentage>**)
  |
| 既定値 | *なし* |
| アニメーション | 可 |
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <text>
    <!-- y with a single value -->
    <tspan y="40%" x="5%">SVG</tspan>

    <!-- y with multiple values -->
    <tspan y="40%,60%,80%" x="55%">SVG</tspan>
  </text>
</svg>
```



```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

use
---

`<use>` の場合， `y` は参照される要素の左上隅の Y 座標を定義します．

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | 可 |

**メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は使用される要素の CSS プロパティとしても使用できます。

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-y |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-y |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-y |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-y |
| CSS Masking Module Level 1 # element-attrdef-mask-y |
| Scalable Vector Graphics (SVG) 2 # Y |
| Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementYAttribute |