dy
Das Attribut dy gibt eine Verschiebung entlang der y-Achse auf 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="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;
}
feDropShadow
Bei <feDropShadow> definiert dy die y-Verschiebung des Schattenwurfs. Die Einheit, die zur Auflösung des Attributwertes verwendet wird, wird durch das primitiveUnits-Attribut des <filter>-Elements festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 2 |
| Animierbar | Ja |
feOffset
Bei <feOffset> definiert dy die y-Verschiebung der Eingabegrafik für den Filter. Die Einheit, die zur Auflösung des Attributwertes verwendet wird, wird durch das primitiveUnits-Attribut des <filter>-Elements festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
text
Bei <text>, wenn es einen einzelnen Wert enthält, definiert dy eine Verschiebung entlang der y-Achse für alle Glyphen.
Wenn es mehrere Werte gibt, definiert dy eine Verschiebung entlang der y-Achse für jede einzelne Glyphe relativ zur vorhergehenden Glyphe. 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 | none |
| Animierbar | Ja |
Beispiel
<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;
}
tspan
Bei <tspan>, wenn es einen einzelnen Wert enthält, definiert dy eine Verschiebung entlang der y-Achse für alle alternierenden Glyphen.
Wenn es mehrere Werte gibt, definiert dy eine Verschiebung entlang der y-Achse für jede einzelne Glyphe relativ zur vorhergehenden Glyphe. 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 | none |
| Animierbar | Ja |
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dy |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dy |
| Scalable Vector Graphics (SVG) 2 # TextElementDYAttribute |