Dasdy Attribut gibt eine Verschiebung entlang der y-Achse auf der Position eines Elements oder seines Inhalts an.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

• <feDropShadow>
• <feOffset>
• <text>
• <tspan>

Beispiel

html,body,svg {  height: 100%;}

<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> definiertdy den y-Versatz des fallenden Schattens. Die Einheit, die zur Bestimmung des Wertes des Attributs verwendet wird, wird durch dasprimitiveUnits Attribut des<filter> Elements festgelegt.

feOffset

Für<feOffset> definiertdy den y-Versatz der Filtereingabe-Grafik. Die Einheit, die zur Bestimmung des Wertes des Attributs verwendet wird, wird durch dasprimitiveUnits Attribut des<filter> Elements festgelegt.

text

Für<text>, wenn es einen einzelnen Wert enthält, definiertdy eine Verschiebung entlang der y-Achse für alle Glyphen.

Wenn mehrere Werte vorhanden sind, definiertdy eine Verschiebung entlang der y-Achse für jede einzelne Glyphe relativ zur vorhergehenden Glyphe. Wenn weniger Werte als Glyphen vorhanden sind, verwenden die verbleibenden Glyphen einen Wert von0. Wenn mehr Werte als Glyphen vorhanden sind, werden zusätzliche Werte ignoriert.

Beispiel

html,body,svg {  height: 100%;}

<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>, wenn es einen einzelnen Wert enthält, definiertdy eine Verschiebung entlang der y-Achse für alle alternierenden Glyphen.

Wenn mehrere Werte vorhanden sind, definiertdy eine Verschiebung entlang der y-Achse für jede einzelne Glyphe relativ zur vorhergehenden Glyphe. Wenn weniger Werte als Glyphen vorhanden sind, verwenden die verbleibenden Glyphen einen Wert von0. Wenn mehr Werte als Glyphen vorhanden sind, werden zusätzliche Werte ignoriert.

Spezifikationen