W3cubDocs

/SVG

x

Example

<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

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

For <altGlyph>, x defines the x-axis coordinate of the alternate glyph.

Value List of <length>
Default value none
Animatable Yes

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

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

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x