x

Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.

Für <feBlend> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feColorMatrix> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feComponentTransfer> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feComposite> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feConvolveMatrix> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feDiffuseLighting> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feDisplacementMap> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feDropShadow> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feFlood> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feFuncA> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feFuncB> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feFuncG> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feFuncR> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feGaussianBlur> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feImage> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feMerge> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feMergeNode> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feMorphology> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feOffset> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

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

Für <feSpecularLighting> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

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

Für <feTile> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <feTurbulence> definiert x die minimale x-Koordinate für den Darstellungsbereich der Primärform.

Für <filter> definiert x die x-Koordinate der oberen linken Ecke des Darstellungsbereichs des Filters.

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

Für <glyphRef> definiert x die x-Achsen-Koordinate des Glpyhen.

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 des Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird durch das maskUnits Attribut 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 einzigen Wert enthält, definiert x die x-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Inhaltstextposition wird von anderen Eigenschaften beeinflusst, wie text-anchor oder direction.

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, 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 einzigen Wert enthält, definiert x die x-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Inhaltstextposition wird von anderen Eigenschaften beeinflusst, wie text-anchor oder direction.

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.

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

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, 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, von denen jedes einen kleineren x-Wert als das vorherige hat.

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>

• CSS x Eigenschaft