x - SVG | MDN

要素

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

`<feBlend>`

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

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

`<feColorMatrix>`

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

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

`<feComponentTransfer>`

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

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

`<feComposite>`

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

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

`<feConvolveMatrix>`

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

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

`<feDiffuseLighting>`

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

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

`<feDisplacementMap>`

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

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

`<feDropShadow>`

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

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

`<feFlood>`

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

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

`<feFuncA>`

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

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

`<feFuncB>`

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

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

`<feFuncG>`

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

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

`<feFuncR>`

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

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

`<feGaussianBlur>`

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

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

`<feImage>`

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

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

`<feMerge>`

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

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

`<feMergeNode>`

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

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

`<feMorphology>`

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

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

`<feOffset>`

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

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

`<fePointLight>`

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

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

`<feSpecularLighting>`

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

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

`<feSpotLight>`

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

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

`<feTile>`

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

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

`<feTurbulence>`

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

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

`<filter>`

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

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

`<foreignObject>`

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

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

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

`<glyphRef>`

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

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

値	<number>
既定値	最初の glyphRef では `0`、それ以降の兄弟 `<glyphRef>` では直前の `<glyphRef>` における末尾の X 座標。
アニメーション	可

`<image>`

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

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

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

`<mask>`

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

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

`<pattern>`

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

値	<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 や direction など、他のプロパティの影響を受けます。

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

値	(<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="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> は非推奨であり、使用すべきではありません。

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

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

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

`<tspan>`

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

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

値	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="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`
アニメーション	可

メモ: 一部のブラウザーでは、 CSS で <length> または <percentage> を使用して x 幾何プロパティを宣言すると、 <use> に設定された x 属性を上書きします。この動作は標準外であり、非推奨であり、将来のブラウザーのバージョンでは除去される可能性が高いです。

例

この例には 3 つの <rect> 要素があり、それぞれの x が前の値よりも小さくなっています。

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

html

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

仕様書

Specification
Filter Effects Module Level 1 # element-attrdef-filter-x
Filter Effects Module Level 1 # element-attrdef-fespotlight-x
Filter Effects Module Level 1 # element-attrdef-fepointlight-x
Filter Effects Module Level 1 # element-attrdef-filter-primitive-x
CSS Masking Module Level 1 # element-attrdef-mask-x
Scalable Vector Graphics (SVG) 2 # X
Scalable Vector Graphics (SVG) 2 # PatternElementXAttribute
Scalable Vector Graphics (SVG) 2 # TextElementXAttribute

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年4月11日⁩ by MDN contributors.

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