y2

Das Attribut y2 wird verwendet, um die zweite y-Koordinate für das Zeichnen eines SVG-Elements anzugeben, das mehr als eine Koordinate erfordert. Elemente, die nur eine Koordinate benötigen, verwenden stattdessen das Attribut y.

Elemente

Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.

`<line>`

Für <line> definiert y2 die y-Koordinate des Endpunkts der Linie.

Wert	<length> \| <percentage> \| <number>
Standardwert	`0`
Animierbar	Ja

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

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="9" y1="5" y2="1" stroke="red" />
  <line x1="1" x2="9" y1="5" y2="5" stroke="green" />
  <line x1="1" x2="9" y1="5" y2="9" stroke="blue" />
</svg>

`<linearGradient>`

Für <linearGradient> definiert y2 die y-Koordinate des Endpunkts des Gradientvektors, der verwendet wird, um die Farbverlaufsstoppwerte zuzuordnen. Das genaue Verhalten dieses Attributs wird durch die Attribute gradientUnits beeinflusst.

Wert	<length>
Standardwert	`0%`
Animierbar	Ja

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

html

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  By default the gradient vector end at the top right
  corner of the bounding box of the shape it is applied to.
  -->
  <linearGradient y2="0%" id="g0">
    <stop offset="5%" stop-color="black" />
    <stop offset="50%" stop-color="red" />
    <stop offset="95%" stop-color="black" />
  </linearGradient>

  <rect x="1" y="1" width="8" height="8" fill="url(#g0)" />

  <!--
  Here the gradient vector end at the bottom right
  corner of the bounding box of the shape it is applied to.
  -->
  <linearGradient y2="100%" id="g1">
    <stop offset="5%" stop-color="black" />
    <stop offset="50%" stop-color="red" />
    <stop offset="95%" stop-color="black" />
  </linearGradient>

  <rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg>

Beispiele

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

html

<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
  <line x1="2" x2="22" y1="20" y2="0" stroke="red" />
  <line x1="2" x2="22" y1="20" y2="10" stroke="green" />
  <line x1="2" x2="22" y1="20" y2="20" stroke="blue" />
</svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # LinearGradientElementY2Attribute

y2

Elemente

`<line>`

`<linearGradient>`

Beispiele

Spezifikationen

Browser-Kompatibilität

svg.elements.line.y2

svg.elements.linearGradient.y2