x

Sie können dieses Attribut mit den unten beschriebenen SVG-Elementen verwenden.

Für <feBlend> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feColorMatrix> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feComponentTransfer> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feComposite> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feConvolveMatrix> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feDiffuseLighting> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feDisplacementMap> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feDropShadow> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feFlood> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feFuncA> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feFuncB> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feFuncG> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feFuncR> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feGaussianBlur> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feImage> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feMerge> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feMergeNode> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feMorphology> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feOffset> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <fePointLight> definiert x den x-Standort der Lichtquelle im Koordinatensystem, das durch das Attribut primitiveUnits am <filter>-Element definiert wird.

Für <feSpecularLighting> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feSpotLight> definiert x den x-Standort der Lichtquelle im Koordinatensystem, das durch das Attribut primitiveUnits am <filter>-Element definiert wird.

Für <feTile> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <feTurbulence> definiert x die minimale x-Koordinate für den Darstellungsbereich des Primitives.

Für <filter> definiert x die x-Koordinate der oberen linken Ecke für den Darstellungsbereich 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 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. Der genaue Effekt dieses Attributs wird durch das Attribut maskUnits beeinflusst.

Für <pattern> definiert x die x-Koordinate der oberen linken Ecke des Kachelmusters. Der genaue Effekt 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 Textposition des Inhalts platziert werden muss. Die Textposition des Inhalts ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Textposition des Inhalts wird durch andere Eigenschaften beeinflusst, wie text-anchor oder direction.

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphe im Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Übereinstimmung 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 einzelnen Wert enthält, definiert x die x-Koordinate, an der die Textposition des Inhalts platziert werden muss. Die Textposition des Inhalts ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Textposition des Inhalts wird durch andere Eigenschaften beeinflusst, wie text-anchor oder direction.

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphe im Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Übereinstimmung 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 einzelnen Wert enthält, definiert x die x-Koordinate, an der die Textposition des Inhalts platziert werden muss. Die Textposition des Inhalts ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Textposition des Inhalts wird durch andere Eigenschaften beeinflusst, wie text-anchor oder direction.

Wenn es mehrere Werte enthält, definiert x die x-Koordinate jedes einzelnen Glyphe im Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Übereinstimmung 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, jedes mit einem kleineren x-Wert als der vorherige Wert.

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