dy

Das dy-Attribut gibt eine Verschiebung entlang der y-Achse für die Position eines Elements oder dessen Inhalt an.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

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

html

<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>

css

line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

feDropShadow

Für <feDropShadow> definiert dy den y-Versatz des erzeugten Schattens. Die Einheit zur Auflösung des Attributwertes wird durch das primitiveUnits-Attribut des <filter>-Elements festgelegt.

Wert	<number>
Standardwert	`2`
Animierbar	Ja

feOffset

Für <feOffset> definiert dy den y-Versatz der Filtereingabe-Grafik. Die Einheit zur Auflösung des Attributwertes wird durch das primitiveUnits-Attribut des <filter>-Elements festgelegt.

Wert	<number>
Standardwert	`0`
Animierbar	Ja

glyphRef

Warnung: Seit SVG2 ist <glyphRef> veraltet und sollte nicht mehr verwendet werden.

Für <glyphRef> definiert dy den y-Versatz des Glyphen im Schriftmetriken-System.

Wert	<number>
Standardwert	`0`
Animierbar	Ja

text

Für <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

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

html

<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>

css

line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

tref

Warnung: Seit SVG2 ist <tref> veraltet und sollte nicht mehr verwendet werden.

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

Wert	Liste von (<length> \| <percentage>)
Standardwert	none
Animierbar	Ja

tspan

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

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