dx

Das dx Attribut gibt eine Verschiebung entlang der x-Achse der Position eines Elements oder seines Inhalts an.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Some reference text -->
  <text x="10%" y="50%" fill="grey">SVG</text>

  <!-- The same text with a shift along the x-axis -->
  <text dx="50%" x="10%" y="50%">SVG</text>
</svg>
css
line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

feDropShadow

Für <feDropShadow> definiert dx den x-Versatz des fallenden Schattens. Die Einheit zur Berechnung des Wertes des Attributs wird durch das primitiveUnits Attribut des <filter> Elements festgelegt.

Wert <number>
Standardwert 2
Animierbar Ja

feOffset

Für <feOffset> definiert dx den x-Versatz der Filtereingabe-Grafik. Die Einheit zur Berechnung des Wertes des Attributs wird durch das primitiveUnits Attribut des <filter> Elements festgelegt.

Wert <number>
Standardwert 0
Animierbar Ja

glyphRef

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

Für <glyphRef> definiert dx den x-Versatz des Glyphs im Schriftmetriken-System.

Wert <number>
Standardwert 0
Animierbar Ja

text

Für <text> definiert dx, wenn es einen einzelnen Wert enthält, eine Verschiebung entlang der x-Achse für alle Glyphen.

Wenn es mehrere Werte gibt, definiert dx eine Verschiebung entlang der x-Achse für jedes einzelne Glyph relativ zum vorhergehenden Glyph. Wenn es weniger Werte als Glyphen gibt, verwenden die verbleibenden Glyphen einen Wert von 0. Wenn es mehr Werte als Glyphen gibt, werden zusätzliche Werte ignoriert.

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

Beispiel

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="25%" y2="25%" />
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="0" x2="100%" y1="75%" y2="75%" />

  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="30%" x2="30%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Behaviors change based on the number
       of values in the attributes -->
  <text dx="20%" x="10%" y="25%">SVG</text>
  <text dx="0 10%" x="10%" y="50%">SVG</text>
  <text dx="0 10% 20%" x="10%" y="75%">SVG</text>
</svg>
css
line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

tref

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

Für <tref> definiert dx, wenn es einen einzelnen Wert enthält, eine Verschiebung entlang der x-Achse für alle Glyphen.

Wenn es mehrere Werte gibt, definiert dx eine Verschiebung entlang der x-Achse für jedes einzelne Glyph relativ zum vorhergehenden Glyph. Wenn es weniger Werte als Glyphen gibt, verwenden die verbleibenden Glyphen einen Wert von 0. Wenn es mehr Werte als Glyphen gibt, werden zusätzliche Werte ignoriert.

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

tspan

Für <tspan> definiert dx, wenn es einen einzigen Wert enthält, eine Verschiebung entlang der x-Achse für alle alternativen Glyphen.

Wenn es mehrere Werte gibt, definiert dx eine Verschiebung entlang der x-Achse für jedes einzelne Glyph relativ zum vorhergehenden Glyph. Wenn es weniger Werte als Glyphen gibt, verwenden die verbleibenden Glyphen einen Wert von 0. Wenn es mehr Werte als Glyphen gibt, werden zusätzliche Werte ignoriert.

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

Spezifikationen

Specification
Filter Effects Module Level 1
# element-attrdef-fedropshadow-dx
Filter Effects Module Level 1
# element-attrdef-feoffset-dx
Scalable Vector Graphics (SVG) 2
# TextElementDXAttribute