x

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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

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

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.

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

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.

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.

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.

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.

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

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

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

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>