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,
body,
svg {
  height: 100%;
}
```



```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,
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>` (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,
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` |
| アニメーション | 可 |

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

仕様書
---

| 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 |