dy
Das dy Attribut gibt eine Verschiebung entlang der y-Achse an, die für die Position eines Elements oder dessen Inhalt verwendet wird.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
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
Für <feDropShadow> definiert dy den y-Versatz des Schattens. Die Einheit zur Bestimmung des Attributwertes wird durch das Attribut primitiveUnits des <filter> Elements festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 2 |
| Animierbar | Ja |
feOffset
Für <feOffset> definiert dy den y-Versatz der Filtereingabegrafik. Die Einheit zur Bestimmung des Attributwertes wird durch das Attribut primitiveUnits des <filter> Elements festgelegt.
| Wert | <number> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
text
Für <text> definiert dy bei einem einzelnen Wert eine Verschiebung entlang der y-Achse für alle Glyphen.
Bei mehreren Werten 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 den Wert 0. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen 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
Für <tspan> definiert dy bei einem einzelnen Wert eine Verschiebung entlang der y-Achse für alle alternierenden Glyphen.
Bei mehreren Werten 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 den Wert 0. Wenn es mehr Werte als Glyphen 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-dy |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dy |
| Scalable Vector Graphics (SVG) 2 # TextElementDYAttribute |