x

Das x-Attribut definiert eine x-Achsenkoordinate im Benutzerkoordinatensystem.

Elemente

Dieses Attribut kann bei den unten beschriebenen SVG-Elementen verwendet werden.

`<feBlend>`

Für <feBlend> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feColorMatrix>`

Für <feColorMatrix> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feComponentTransfer>`

Für <feComponentTransfer> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feComposite>`

Für <feComposite> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feConvolveMatrix>`

Für <feConvolveMatrix> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feDiffuseLighting>`

Für <feDiffuseLighting> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feDisplacementMap>`

Für <feDisplacementMap> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feDropShadow>`

Für <feDropShadow> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feFlood>`

Für <feFlood> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feFuncA>`

Für <feFuncA> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feFuncB>`

Für <feFuncB> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feFuncG>`

Für <feFuncG> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feFuncR>`

Für <feFuncR> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feGaussianBlur>`

Für <feGaussianBlur> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feImage>`

Für <feImage> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feMerge>`

Für <feMerge> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feMergeNode>`

Für <feMergeNode> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feMorphology>`

Für <feMorphology> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feOffset>`

Für <feOffset> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<fePointLight>`

Für <fePointLight> definiert x die x-Position der Lichtquelle im Koordinatensystem, das durch das Attribut primitiveUnits auf dem <filter>-Element definiert wird.

Wert	<number>
Standardwert	`0`
Animierbar	Ja

`<feSpecularLighting>`

Für <feSpecularLighting> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feSpotLight>`

Für <feSpotLight> definiert x die x-Position der Lichtquelle im Koordinatensystem, das durch das Attribut primitiveUnits auf dem <filter>-Element definiert wird.

Wert	<number>
Standardwert	`0`
Animierbar	Ja

`<feTile>`

Für <feTile> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<feTurbulence>`

Für <feTurbulence> definiert x die minimale x-Koordinate für den Rendering-Bereich der Primitive.

Wert	<length> \| <percentage>
Standardwert	`0%`
Animierbar	Ja

`<filter>`

Für <filter> definiert x die x-Koordinate der oberen linken Ecke für den Rendering-Bereich des Filters.

Wert	<length> \| <percentage>
Standardwert	`-10%`
Animierbar	Ja

`<foreignObject>`

Für <foreignObject> definiert x die x-Koordinate der oberen linken Ecke seines Ansichtsfensters.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die x-Achsenkoordinate des <foreignObject> kann auch mit der x Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der x-Eigenschaft den Wert des x-Attributs.

`<glyphRef>`

Warnung: Ab SVG2 ist <glyphRef> veraltet und sollte nicht verwendet werden.

Für <glyphRef> definiert x die x-Achsenkoordinate des Glyphs.

Wert	<number>
Standardwert	`0` für das erste glyphRef und die End-x-Koordinate des vorherigen `<glyphRef>` für alle darauf folgenden Geschwister-`<glyphRef>`.
Animierbar	Ja

`<image>`

Für <image> definiert x die x-Koordinate der oberen linken Ecke des Bildes.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die x-Achsenkoordinate des <image> kann auch mit der x Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der x-Eigenschaft den Wert des x-Attributs.

`<mask>`

Für <mask> definiert x die x-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird durch das Attribut maskUnits beeinflusst.

Wert	<length> \| <percentage>
Standardwert	`-10%`
Animierbar	Ja

`<pattern>`

Für <pattern> definiert x die x-Koordinate der oberen linken Ecke des Kachelmusters. Die genaue Wirkung dieses Attributs wird durch die Attribute patternUnits und patternTransform beeinflusst.

Wert	<length>
Standardwert	`0`
Animierbar	Ja

`<rect>`

Für <rect> definiert x die x-Koordinate der oberen linken Ecke der Form.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die x-Achsenkoordinate des <rect> kann auch mit der x Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der x-Eigenschaft den Wert des x-Attributs.

`<svg>`

Für <svg> definiert x die x-Koordinate der oberen linken Ecke seines Ansichtsfensters.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die x-Achsenkoordinate des <svg> kann auch mit der x Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der x-Eigenschaft den Wert des x-Attributs.

`<text>`

Für <text>, wenn es einen einzelnen Wert enthält, definiert x die x-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaue Inhaltstextposition wird durch andere Eigenschaften wie text-anchor oder direction beeinflusst.

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphs aus dem Text. Gibt es weniger Werte als Glyphen, werden die restlichen Glyphen in einer Linie mit dem letzten positionierten Glyph platziert. Gibt es mehr Werte als Glyphen, werden die zusätzlichen Werte ignoriert.

Wert	Liste von (<length> \| <percentage>)
Standardwert	`0`
Animierbar	Ja

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

Warnung: Ab SVG2 ist <tref> veraltet und sollte nicht verwendet werden.

Für <tref>, wenn es einen einzelnen Wert enthält, definiert x die x-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaue Inhaltstextposition wird durch andere Eigenschaften wie text-anchor oder direction beeinflusst.

Wert	Liste von (<length> \| <percentage>)
Standardwert	`0`
Animierbar	Ja

`<tspan>`

Für <tspan>, wenn es einen einzelnen Wert enthält, definiert x die x-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaue Inhaltstextposition wird durch andere Eigenschaften wie text-anchor oder direction beeinflusst.

Wert	Liste von (<length> \| <percentage>)
Standardwert	keiner
Animierbar	Ja

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

Für <use> definiert x die x-Koordinate der oberen linken Ecke des referenzierten Elements.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Das Deklarieren eines <length>- oder <percentage>-Wertes in CSS mit der x Geometrie-Eigenschaft überschreibt die x-Achsenkoordinate des <use>, die vom x-Attribut in einigen Browsern festgelegt wird. Dieses Verhalten ist nicht standardmäßig, veraltet und wird wahrscheinlich in zukünftigen Browserversionen entfernt.

Beispiele

Dieses Beispiel enthält drei <rect>-Elemente, jedes mit einem kleineren x-Wert als der vorherige.

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>

Spezifikationen

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