x
=

The **`x`** attribute defines an x-axis coordinate in the user coordinate system.

You can use this attribute with the following SVG elements:

* `<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>`
Example
-------
```

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

feBlend
-------

For `<feBlend>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feColorMatrix
-------------

For `<feColorMatrix>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feComponentTransfer
-------------------

For `<feComponentTransfer>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feComposite
-----------

For `<feComposite>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feConvolveMatrix
----------------

For `<feConvolveMatrix>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feDiffuseLighting
-----------------

For `<feDiffuseLighting>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feDisplacementMap
-----------------

For `<feDisplacementMap>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feDropShadow
------------

For `<feDropShadow>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feFlood
-------

For `<feFlood>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feFuncA
-------

For `<feFuncA>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feFuncB
-------

For `<feFuncB>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feFuncG
-------

For `<feFuncG>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feFuncR
-------

For `<feFuncR>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feGaussianBlur
--------------

For `<feGaussianBlur>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feImage
-------

For `<feImage>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feMerge
-------

For `<feMerge>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feMergeNode
-----------

For `<feMergeNode>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feMorphology
------------

For `<feMorphology>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feOffset
--------

For `<feOffset>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

fePointLight
------------

For `<fePointLight>`, `x` defines the x location for the light source in the coordinate system defined by the `primitiveUnits` attribute on the `<filter>` element.

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | `0` |
| Animatable | Yes |

feSpecularLighting
------------------

For `<feSpecularLighting>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feSpotLight
-----------

For `<feSpotLight>`, `x` defines the x location for the light source in the coordinate system defined by the `primitiveUnits` attribute on the `<filter>` element.

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | `0` |
| Animatable | Yes |

feTile
------

For `<feTile>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

feTurbulence
------------

For `<feTurbulence>`, `x` defines the minimum x coordinate for the rendering area of the primitive.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0%` |
| Animatable | Yes |

filter
------

For `<filter>`, `x` defines the x coordinate of the upper left corner for the rendering area of the filter.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `-10%` |
| Animatable | Yes |

foreignObject
-------------

For `<foreignObject>`, `x` defines the x coordinate of the upper left corner of its viewport.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2, `x` is a *Geometry Property* meaning this attribute can also be used as a CSS property for `<foreignObject>`.

glyphRef
--------

**Warning:** As of SVG2 `<glyphRef>` is deprecated and shouldn't be used.

For `<glyphRef>`, `x` defines the x-axis coordinate of the glyph.

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | `0` for the first glyphRef, and the end x coordinate of the
 previous `<glyphRef>` for all subsequent sibling
 `<glyphRef>`.
  |
| Animatable | Yes |

image
-----

For `<image>`, `x` defines the x coordinate of the upper left corner of the image.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2, `x` is a *Geometry Property* meaning this attribute can also be used as a CSS property for images.

mask
----

For `<mask>`, `x` defines the x coordinate of the upper left corner of its area of effect. The exact effect of this attribute is influenced by the `maskUnits` attribute.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `-10%` |
| Animatable | Yes |

pattern
-------

For `<pattern>`, `x` defines the x coordinate of the upper left corner of the tile pattern. The exact effect of this attribute is influenced by the `patternUnits` and `patternTransform` attributes.

|  |  |
| --- | --- |
| Value | **<length>** |
| Default value | `0` |
| Animatable | Yes |

rect
----

For `<rect>`, `x` defines the x coordinate of the upper left corner of the shape.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2, `x` is a *Geometry Property* meaning this attribute can also be used as a CSS property for rectangles.

svg
---

For `<svg>`, `x` defines the x coordinate of the upper left corner of its viewport.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2, `x` is a *Geometry Property* meaning this attribute can also be used as a CSS property for `<svg>`.

text
----

For `<text>`, if it contains a single value, `x` defines the x coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `x` defines the x coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value | 
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | `0` |
| Animatable | Yes |
```

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

**Warning:** As of SVG2 `<tref>` is deprecated and shouldn't be used.

For `<tref>`, if it contains a single value, `x` defines the x coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `x` defines the x coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value | 
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | `0` |
| Animatable | Yes |

tspan
-----

For `<tspan>`, if it contains a single value, `x` defines the x coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `x` defines the x coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value | 
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | *none* |
| Animatable | Yes |
```

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

For `<use>`, `x` defines the x coordinate of the upper left corner of the referenced element.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>** |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2, `x` is a *Geometry Property* meaning this attribute can also be used as a CSS property for used elements.

Specifications
--------------

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