x
x
属性はユーザー座標系の X 軸の座標を定義します。
この属性は、以下の 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
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="60" height="60" />
<rect x="120" y="20" width="60" height="60" />
<rect x="220" y="20" width="60" height="60" />
</svg>
altGlyph
警告: SVG2 では <altGlyph>
は非推奨であるため、使用しないでください。
<altGlyph>
の場合、 x
は代替文字の X 軸の座標を定義します。
値 | <length> のリスト |
---|---|
既定値 | なし |
アニメーション | 可 |
feBlend
<feBlend>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feColorMatrix
<feColorMatrix>
の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feComponentTransfer
<feComponentTransfer>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feComposite
<feComposite>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feConvolveMatrix
<feConvolveMatrix>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feDiffuseLighting
<feDiffuseLighting>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feDisplacementMap
<feDisplacementMap>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feDropShadow
<feDropShadow>
の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feFlood
<feFlood>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feFuncA
<feFuncA>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feFuncB
<feFuncB>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feFuncG
<feFuncG>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feFuncR
<feFuncR>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feGaussianBlur
<feGaussianBlur>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feImage
<feImage>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feMerge
<feMerge>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feMergeNode
<feMergeNode>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feMorphology
<feMorphology>
の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feOffset
<feOffset>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
fePointLight
<fePointLight>
(en-US) の場合、 x
は <filter>
(en-US) 要素の primitiveUnits (en-US)
属性で定義される座標系での光源の X 位置を定義します。
値 | <number> |
---|---|
既定値 | 0 |
アニメーション | 可 |
feSpecularLighting
<feSpecularLighting>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feSpotLight
<feSpotLight>
(en-US) の場合、 x
は <filter>
(en-US) 要素の primitiveUnits (en-US)
属性で定義される座標系での光源の X 位置を定義します。
値 | <number> |
---|---|
既定値 | 0 |
アニメーション | 可 |
feTile
<feTile>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
feTurbulence
<feTurbulence>
(en-US) の場合、 x
はこのプリミティブの描画領域における最小の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0% |
アニメーション | 可 |
filter
<filter>
(en-US) の場合、 x
はこのフィルターの描画領域における左上隅の X 座標をを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | -10% |
アニメーション | 可 |
foreignObject
<foreignObject>
の場合、 x
はこのフィルターの描画領域における左上隅の X 座標をを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0 |
アニメーション | 可 |
メモ: SVG2 からは、x
は幾何プロパティであり、この属性は <foreignObject>
の CSS プロパティとして使用することもできます。
glyphRef
警告: SVG2 では <glyphRef>
(en-US) は非推奨であり、使用すべきではありません。
<glyphRef>
(en-US) の場合、 x
が文字の x 軸の座標を定義します。
値 | <number> |
---|---|
既定値 | 最初の glyphRef では 0 、それ以降の兄弟 <glyphRef> (en-US) では直前の <glyphRef> (en-US) における末尾の X 座標。 |
アニメーション | 可 |
image
<image>
の場合、 x
はこの画像の左上隅の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0 |
アニメーション | 可 |
メモ: SVG2 からは、x
は幾何プロパティであり、この属性は画像用の CSS プロパティとしても使用できます。
mask
<mask>
の場合、 x
は、その影響する領域の左上隅の X 座標を定義します。この属性の正確な効果は、 maskUnits (en-US)
属性に影響されます。
値 | <length> | <percentage> |
---|---|
既定値 | -10% |
アニメーション | 可 |
pattern
<pattern>
の場合、 x
はタイルパターンの左上隅の x 座標を定義します。この属性の正確な効果は、 patternUnits
と patternTransform (en-US)
属性に影響されます。
値 | <length> |
---|---|
既定値 | 0 |
アニメーション | 可 |
rect
<rect>
の場合、 x
は図形の左上隅の X 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0 |
アニメーション | 可 |
メモ: SVG2 からは、x
は幾何プロパティであり、この属性は矩形の CSS プロパティとして使用することもできる。
svg
<svg>
の場合、 x
はそのビューポートの左上隅の x 座標を定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 0 |
アニメーション | 可 |
メモ: SVG2 からは、x
は幾何プロパティであり、この属性は <svg>
の CSS プロパティとして使用することもできます。
text
<text>
にある値が 1 つの場合、 x
はコンテンツテキストの位置を配置しなければならない X 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置は、 text-anchor (en-US)
や direction
など、他のプロパティの影響を受けます。
複数の値がある場合、x
はテキストから個々の文字への X 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。
値 | (<length> | <percentage>) のリスト |
---|---|
既定値 | 0 |
アニメーション | 可 |
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="90%" x2="100%" y2="90%" />
<!-- vertical line to materialized the x positioning -->
<line x1="25%" y1="0" x2="25%" y2="100%" />
<line x1="50%" y1="0" x2="50%" y2="100%" />
<line x1="75%" y1="0" x2="75%" y2="100%" />
<!-- x with a single value -->
<text y="40%" x="50%">SVG</text>
<!-- x with multiple values -->
<text y="90%" x="25%, 50%, 75%">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 つの場合、 x
はコンテンツテキストの位置を配置しなければならない X 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置は、 text-anchor (en-US)
や direction
など、他のプロパティの影響を受けます。
複数の値がある場合、x
はテキストから個々の文字への X 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。
値 | (<length> | <percentage>) のリスト |
---|---|
既定値 | 0 |
アニメーション | 可 |
tspan
<tspan>
にある値が 1 つの場合、 x
はコンテンツテキストの位置を配置しなければならない X 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置*は、 text-anchor (en-US)
や direction
など、他のプロパティの影響を受けます。
複数の値がある場合、x
はテキストから個々の文字への X 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。
値 | List of (<length> | <percentage>) |
---|---|
既定値 | なし |
アニメーション | 可 |
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="90%" x2="100%" y2="90%" />
<!-- vertical line to materialized the x positioning -->
<line x1="25%" y1="0" x2="25%" y2="100%" />
<line x1="50%" y1="0" x2="50%" y2="100%" />
<line x1="75%" y1="0" x2="75%" y2="100%" />
<text>
<!-- x with a single value -->
<tspan y="40%" x="50%">SVG</tspan>
<!-- x with multiple values -->
<tspan y="90%" x="25%, 50%, 75%">SVG</tspan>
</text>
</svg>
css
text {
font: 40px sans-serif;
}
line {
fill: none;
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 2px;
}
use
<use>
の場合, x
は参照される要素の左上隅の x 座標を定義します.
値 | <length> | <percentage> |
---|---|
既定値 | 0 |
アニメーション | 可 |
メモ: SVG2 からは、x
は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用できます。