dx
Das Attribut dx gibt eine Verschiebung der Position eines Elements oder seines Inhalts entlang der x-Achse an.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
feDropShadow
Bei <feDropShadow> definiert dx den Versatz des Schlagschattens entlang der x-Achse. Die Einheit, in der der Attributwert interpretiert wird, wird durch das Attribut primitiveUnits des Elements <filter> festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 2 |
| Animierbar | Ja |
feOffset
Bei <feOffset> definiert dx den Versatz der Eingabegrafik des Filters entlang der x-Achse. Die Einheit, in der der Attributwert interpretiert wird, wird durch das Attribut primitiveUnits des Elements <filter> festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
text
Bei <text> definiert dx eine Verschiebung aller Glyphen entlang der x-Achse, wenn das Attribut einen einzigen Wert enthält.
Bei mehreren Werten definiert dx für jede einzelne Glyphe eine Verschiebung entlang der x-Achse relativ zur vorhergehenden Glyphe. Gibt es weniger Werte als Glyphen, wird für die übrigen Glyphen der Wert 0 verwendet. Gibt es mehr Werte als Glyphen, werden die überzähligen Werte ignoriert.
| Wert | Liste von (<length> | <percentage>) |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
tspan
Bei <tspan> definiert dx eine Verschiebung aller alternativen Glyphen entlang der x-Achse, wenn das Attribut einen einzigen Wert enthält.
Bei mehreren Werten definiert dx für jede einzelne Glyphe eine Verschiebung entlang der x-Achse relativ zur vorhergehenden Glyphe. Gibt es weniger Werte als Glyphen, wird für die übrigen Glyphen der Wert 0 verwendet. Gibt es mehr Werte als Glyphen, werden die überzähligen Werte ignoriert.
| Wert | Liste von (<length> | <percentage>) |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
Beispiele
Text verschieben
<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;
}
Mehrere Werte
<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;
}
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 |