Thex attribute defines an x-axis coordinate in the user coordinate system.

Elements

You can use this attribute with the SVG elements described in the sections below.

<feBlend>

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

<feColorMatrix>

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

<feComponentTransfer>

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

<feComposite>

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

<feConvolveMatrix>

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

<feDiffuseLighting>

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

<feDisplacementMap>

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

<feDropShadow>

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

<feFlood>

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

<feFuncA>

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

<feFuncB>

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

<feFuncG>

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

<feFuncR>

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

<feGaussianBlur>

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

<feImage>

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

<feMerge>

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

<feMergeNode>

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

<feMorphology>

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

<feOffset>

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

<fePointLight>

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

<feSpecularLighting>

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

<feSpotLight>

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

<feTile>

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

<feTurbulence>

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

<filter>

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

<foreignObject>

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

<image>

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

<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 themaskUnits attribute.

<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 thepatternUnits andpatternTransform attributes.

<rect>

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

<svg>

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

<text>

For<text>, if it contains a single value,x defines the x coordinate where thecontent text position must be placed. Thecontent text position is usually a point on the baseline of the first line of text. The exactcontent text position is influenced by other properties, such astext-anchor ordirection.

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.

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

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

text {  font: 40px sans-serif;}line {  fill: none;  stroke: red;  stroke-width: 0.5px;  stroke-dasharray: 2px;}

<tspan>

For<tspan>, if it contains a single value,x defines the x coordinate where thecontent text position must be placed. Thecontent text position is usually a point on the baseline of the first line of text. The exactcontent text position is influenced by other properties, such astext-anchor ordirection.

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.

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

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

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.

Examples

This example contains three<rect> elements, each with anx value smaller than the previous value.

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

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

Specifications

See also

• CSSx property