y
y
属性はユーザー座標系の Y 軸の座標を定義します。
この属性は、以下の SVG 要素で使用することができます。
<cursor>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDropShadow>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<foreignObject>
<glyphRef>
<image>
<mask>
<pattern>
<rect>
<svg>
<symbol>
<text>
<tref>
<tspan>
<use>
例
<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>
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 |
アニメーション | 可 |
メモ: SVG2 からは、y
は幾何プロパティであり、この属性は <foreignObject>
の CSS プロパティとして使用することもできます。
glyphRef
警告: SVG2 では <glyphRef>
は非推奨であり、使用すべきではありません。
<glyphRef>
の場合、 y
が文字の Y 軸の座標を定義します。
値 | <number> |
---|---|
既定値 | なし |
アニメーション | 可 |
image
<image>
の場合、 y
はこの画像の左上隅の Y 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0 |
アニメーション | 可 |
メモ: SVG2 からは、y
は幾何プロパティであり、この属性は画像用の CSS プロパティとしても使用できます。
mask
<mask>
の場合、 y
は、その効果の領域の左上隅の Y 座標を定義します。この属性の正確な効果は、 maskUnits
属性に影響されます。
値 | <length> | <percentage> |
---|---|
既定値 | -10% |
アニメーション | 可 |
pattern
<pattern>
の場合、 y
はタイルパターンの左上隅の Y 座標を定義します。この属性の正確な効果は、 patternUnits
と patternTransform
属性に影響されます。
値 | <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
や direction
など、他のプロパティの影響を受けます。
複数の値がある場合、y
はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。
値 | (<length> | <percentage>) のリスト |
---|---|
既定値 | 0 |
アニメーション | 可 |
<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>
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
など、他のプロパティの影響を受けます。
複数の値がある場合、y
はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。
値 | (<length> | <percentage>) のリスト |
---|---|
既定値 | 0 |
アニメーション | 可 |
tspan
<tspan>
にある値が 1 つの場合、 y
はコンテンツテキストの位置を配置しなければならない Y 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置は、 text-anchor
や direction
など、他のプロパティの影響を受けます。
複数の値がある場合、y
はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。
値 | List of (<length> | <percentage>) |
---|---|
既定値 | なし |
アニメーション | 可 |
<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>
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 プロパティとしても使用できます。