Dasdx Attribut gibt eine Verschiebung entlang der x-Achse für die Position eines Elements oder seines Inhalts an.

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

• <feDropShadow>
• <feOffset>
• <text>
• <tspan>

Beispiel

html,body,svg {  height: 100%;}

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

line {  stroke: red;  stroke-width: 0.5px;  stroke-dasharray: 3px;}

feDropShadow

Für<feDropShadow> definiertdx den x-Versatz des geworfenen Schattens. Die Einheit zur Bestimmung des Werts des Attributs wird durch dasprimitiveUnits Attribut des<filter> Elements festgelegt.

feOffset

Für<feOffset> definiertdx den x-Versatz der Filtereingabegrafik. Die Einheit zur Bestimmung des Werts des Attributs wird durch dasprimitiveUnits Attribut des<filter> Elements festgelegt.

text

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

Wenn mehrere Werte vorhanden sind, definiertdx eine Verschiebung entlang der x-Achse für jede einzelne Glyphe relativ zur vorhergehenden Glyphe. Wenn es weniger Werte als Glyphen gibt, verwenden die verbleibenden Glyphen einen Wert von0. Wenn es mehr Werte als Glyphen gibt, werden zusätzliche Werte ignoriert.

Beispiel

html,body,svg {  height: 100%;}

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

line {  stroke: red;  stroke-width: 0.5px;  stroke-dasharray: 3px;}

tspan

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

Wenn mehrere Werte vorhanden sind, definiertdx eine Verschiebung entlang der x-Achse für jede einzelne Glyphe relativ zur vorhergehenden Glyphe. Wenn es weniger Werte als Glyphen gibt, verwenden die verbleibenden Glyphen einen Wert von0. Wenn es mehr Werte als Glyphen gibt, werden zusätzliche Werte ignoriert.

Spezifikationen