dy
Das Attribut dy gibt eine Verschiebung der Position eines Elements oder seines Inhalts entlang der y-Achse an.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
feDropShadow
Bei <feDropShadow> definiert dy den Versatz des Schlagschattens entlang der y-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 dy den Versatz der Filtereingabegrafik entlang der y-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 dy, wenn es einen einzelnen Wert enthält, eine Verschiebung aller Glyphen entlang der y-Achse.
Wenn mehrere Werte angegeben sind, definiert dy für jede einzelne Glyphe eine Verschiebung entlang der y-Achse relativ zur vorhergehenden Glyphe. Wenn weniger Werte als Glyphen vorhanden sind, verwenden die übrigen Glyphen den Wert 0. Wenn mehr Werte als Glyphen vorhanden sind, werden die zusätzlichen Werte ignoriert.
| Wert | Liste von (<length> | <percentage>) |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
tspan
Bei <tspan> definiert dy, wenn es einen einzelnen Wert enthält, eine Verschiebung aller Glyphen entlang der y-Achse.
Wenn mehrere Werte angegeben sind, definiert dy für jede einzelne Glyphe eine Verschiebung entlang der y-Achse relativ zur vorhergehenden Glyphe. Wenn weniger Werte als Glyphen vorhanden sind, verwenden die übrigen Glyphen den Wert 0. Wenn mehr Werte als Glyphen vorhanden sind, werden die zusätzlichen 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="10%" x2="10%" y1="0" y2="100%" />
<line x1="0" x2="100%" y1="30%" y2="30%" />
<line x1="0" x2="100%" y1="80%" y2="80%" />
<!-- Some reference text -->
<text x="10%" y="30%" fill="grey">SVG</text>
<!-- The same text with a shift along the y-axis -->
<text dy="50%" x="10%" y="30%">SVG</text>
</svg>
line {
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 3px;
}
Mehrere Werte
<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
<!-- Horizontal lines -->
<line x1="0" x2="100%" y1="30" y2="30" />
<line x1="0" x2="100%" y1="40" y2="40" />
<line x1="0" x2="100%" y1="50" y2="50" />
<line x1="0" x2="100%" y1="60" y2="60" />
<!-- Vertical lines -->
<line x1="10" x2="10" y1="0" y2="100%" />
<line x1="50" x2="50" y1="0" y2="100%" />
<line x1="90" x2="90" y1="0" y2="100%" />
<!-- Behaviors change based on the number of values in the attributes -->
<text dy="20" x="10" y="30">SVG</text>
<text dy="0 10" x="50" y="30">SVG</text>
<text dy="0 10 20" x="90" y="30">SVG</text>
</svg>
line {
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 3px;
}
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dy |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dy |
| Scalable Vector Graphics (SVG) 2 # TextElementDYAttribute |