このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

y

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

要素

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

`<feBlend>`

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

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

`<feColorMatrix>`

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

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

`<feComponentTransfer>`

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

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

`<feComposite>`

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

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

`<feConvolveMatrix>`

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

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

`<feDiffuseLighting>`

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

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

`<feDisplacementMap>`

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

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

`<feDropShadow>`

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

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

`<feFlood>`

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

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

`<feFuncA>`

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

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

`<feFuncB>`

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

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

`<feFuncG>`

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

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

`<feFuncR>`

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

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

`<feGaussianBlur>`

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

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

`<feImage>`

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

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

`<feMerge>`

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

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

`<feMergeNode>`

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

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

`<feMorphology>`

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

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

`<feOffset>`

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

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

`<fePointLight>`

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

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

`<feSpecularLighting>`

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

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

`<feSpotLight>`

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

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

`<feTile>`

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

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

`<feTurbulence>`

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

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

`<filter>`

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

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

`<foreignObject>`

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

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

メモ:<foreignObject> の Y 座標はy 幾何プロパティでも定義できます。 CSS で設定すると、y プロパティの値はy 属性の値を上書きします。

`<glyphRef>`

警告:SVG2 では<glyphRef> は非推奨であり、使用すべきではありません。

<glyphRef> の場合、y が文字の Y 軸の座標を定義します。

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

`<image>`

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

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

メモ:<image> の Y 座標はy 幾何プロパティでも定義できます。 CSS で設定すると、y プロパティの値はy 属性の値を上書きします。

`<mask>`

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

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

`<pattern>`

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

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

`<rect>`

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

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

メモ:<rect> の Y 座標はy 幾何プロパティでも定義できます。 CSS で設定すると、y プロパティの値はy 属性の値を上書きします。

`<svg>`

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

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

メモ:<svg> の Y 座標はy 幾何プロパティでも定義できます。 CSS で設定すると、y プロパティの値はy 属性の値を上書きします。

`<text>`

<text> にある値が 1 つの場合、y はコンテンツテキストの位置を配置しなければならない Y 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置は、text-anchor や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">  <!-- テキストのベースラインを素材化する水平線 -->  <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%" />  <!-- x の位置指定を素材化する垂直行 -->  <line x1="5%" y1="0" x2="5%" y2="100%" />  <line x1="55%" y1="0" x2="55%" y2="100%" />  <!-- y を単一の値で -->  <text y="40%" x="5%">SVG</text>  <!-- y を複数の値で -->  <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> は非推奨であり、使用すべきではありません。

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

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

`<tspan>`

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

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

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">  <!-- テキストのベースラインを素材化する水平線 -->  <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%" />  <!-- x の位置指定を素材化する垂直線 -->  <line x1="5%" y1="0" x2="5%" y2="100%" />  <line x1="55%" y1="0" x2="55%" y2="100%" />  <text>    <!-- y を単一の値で -->    <tspan y="40%" x="5%">SVG</tspan>    <!-- y を複数の値で -->    <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`
アニメーション	可

メモ:一部のブラウザーでは、 CSS で<length> または<percentage> を使用してy 幾何プロパティを宣言すると、<use> に設定されたy 属性を上書きします。この動作にはリスクがあります。

例

この例では、 3 つの<rect> 要素が含まれており、それぞれy 値が前回より小さくなっています。

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

html

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

仕様書

Specification
Filters 1.0 # element-attrdef-filter-y
Filters 1.0 # element-attrdef-fespotlight-y
Filters 1.0 # element-attrdef-fepointlight-y
Filters 1.0 # element-attrdef-filter-primitive-y
CSS Masks # element-attrdef-mask-y
Scalable Vector Graphics (SVG) 2 # Y
Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute
Scalable Vector Graphics (SVG) 2 # TextElementYAttribute

Help improve MDN

Learn how to contribute

This page was last modified on2025年7月22日 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

y

Help improve MDN