dx
Das dx Attribut gibt eine Verschiebung entlang der x-Achse für die Position eines Elements oder dessen Inhalt an.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
<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> definiert dx den x-Versatz des erzeugten Schattens. Die Einheit, die zur Bestimmung des Wertes des Attributs verwendet wird, 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, die zur Bestimmung des Wertes des Attributs verwendet wird, wird durch das primitiveUnits Attribut des <filter> Elements festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
text
Für <text>, falls es einen einzelnen Wert enthält, definiert dx eine Verschiebung entlang der x-Achse für alle Zeichen.
Wenn es mehrere Werte gibt, definiert dx eine Verschiebung entlang der x-Achse für jedes einzelne Zeichen relativ zum vorhergehenden Zeichen. Wenn es weniger Werte als Zeichen gibt, verwenden die verbleibenden Zeichen einen Wert von 0. Wenn es mehr Werte als Zeichen gibt, werden die zusätzlichen Werte ignoriert.
| Wert | Liste von (<length> | <percentage>) |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
Beispiel
<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, definiert dx eine Verschiebung entlang der x-Achse für alle alternierenden Zeichen.
Wenn es mehrere Werte gibt, definiert dx eine Verschiebung entlang der x-Achse für jedes einzelne Zeichen relativ zum vorhergehenden Zeichen. Wenn es weniger Werte als Zeichen gibt, verwenden die verbleibenden Zeichen einen Wert von 0. Wenn es mehr Werte als Zeichen gibt, werden die zusätzlichen Werte ignoriert.
| Wert | Liste von (<length> | <percentage>) |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dx |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dx |
| Scalable Vector Graphics (SVG) 2 # TextElementDXAttribute |