SVGLinearGradientElement.y2 — Eigenschaft · JavaScript-Referenz

Signatur

SVGLinearGradientElement.y2

Beschreibung

Die Eigenschaft y2 des Interfaces SVGLinearGradientElement gibt das Attribut y2 eines <linearGradient>-Elements als SVGAnimatedLength zurück. Zusammen mit x1, y1 und x2 legt sie den Gradientenvektor fest, an dem sich die Farbstopps (<stop>) ausrichten. y2 ist dabei die y-Koordinate des Endpunkts dieses Vektors. Die Kurzbeschreibung bei MDN spricht hier fälschlich vom Startpunkt; den Startpunkt beschreibt y1.

Die Eigenschaft selbst ist schreibgeschützt: Das SVGAnimatedLength-Objekt lässt sich nicht ersetzen. Seinen Wert können Sie aber über y2.baseVal (ein SVGLength) ändern. y2.animVal liefert den aktuellen Wert, wenn gerade eine SMIL-Animation (z. B. <animate attributeName="y2">) läuft. Außerhalb einer Animation stimmt animVal mit baseVal überein.

Wie der Wert gedeutet wird, hängt vom Attribut gradientUnits ab. Beim Standard objectBoundingBox beziehen sich Werte wie 0, 1 oder 100% auf den Begrenzungsrahmen des gefüllten Elements. Bei userSpaceOnUse gelten Koordinaten im Nutzerkoordinatensystem. Fehlt das Attribut, ist der Standardwert 0%. Ein unveränderter Gradient verläuft deshalb waagerecht von links nach rechts.

Typische Anwendungsfälle: die Richtung eines Verlaufs per Skript ändern (z. B. von waagerecht auf senkrecht oder diagonal), die aktuelle Konfiguration auslesen oder den Verlauf interaktiv an Mausbewegungen oder Scrollposition koppeln.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (bearbeitbares SVGLength, entspricht dem Attributwert) und animVal (schreibgeschütztes SVGLength mit dem aktuell animierten Wert).

Beispiele

y2 eines Gradienten auslesen

// <svg><defs><linearGradient id="verlauf" x1="0" y1="0" x2="0" y2="100%">…</linearGradient></defs></svg>
const gradient = document.getElementById('verlauf');
const y2 = gradient.y2.baseVal;

console.log(y2.valueAsString);
console.log(y2.valueInSpecifiedUnits);
console.log(y2.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

100% 100 true

Verlauf von waagerecht auf senkrecht umstellen

const gradient = document.querySelector('#verlauf');

// Vektor von oben (0 %) nach unten (100 %)
gradient.x2.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 0);
gradient.y2.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);

// Das Attribut wird automatisch mitgeändert
console.log(gradient.getAttribute('y2'));

100%

Verlaufsrichtung interaktiv an die Maus koppeln

const svg = document.querySelector('svg');
const gradient = document.querySelector('#verlauf');

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  const relY = ((event.clientY - rect.top) / rect.height) * 100;
  // Endpunkt des Vektors folgt der Mausposition (vertikal)
  gradient.y2.baseVal.valueAsString = `${relY.toFixed(1)}%`;
});

baseVal und animVal bei laufender Animation vergleichen

// <linearGradient id="verlauf" y2="0%">
//   <animate attributeName="y2" from="0%" to="100%" dur="2s" repeatCount="indefinite" />
// </linearGradient>
const { y2 } = document.getElementById('verlauf');

setTimeout(() => {
  console.log('Basis:', y2.baseVal.valueAsString);
  console.log('Animiert:', y2.animVal.valueAsString);
}, 1000);

Basis: 0% Animiert: 50% (ungefähr, je nach Zeitpunkt)

// Wichtig · Fallstricke

Endpunkt, nicht Startpunkt: y2 ist die y-Koordinate des Endpunkts. Den Startpunkt bestimmen x1/y1.
Nicht zuweisbar: gradient.y2 = … hat keine Wirkung (im strikten Modus gibt es einen TypeError). Ändern Sie stattdessen y2.baseVal oder rufen Sie setAttribute('y2', …) auf.
animVal ist schreibgeschützt: Schreibversuche lösen eine NoModificationAllowedError-DOMException aus.
Prozentwerte und value: Bei Prozentangaben ohne Bezugsrahmen (vor allem bei objectBoundingBox) ist baseVal.value in Nutzereinheiten oft wenig aussagekräftig oder von der Implementierung abhängig. Verwenden Sie besser valueInSpecifiedUnits oder valueAsString.
gradientUnits beachten: Bei objectBoundingBox entspricht 1 dem Wert 100% des Begrenzungsrahmens. Bei userSpaceOnUse sind es absolute Nutzerkoordinaten. Ein nachträglicher Wechsel von gradientUnits ändert die Wirkung vorhandener Werte.
Vererbung über href: Übernimmt ein Gradient Attribute per href/xlink:href von einem anderen, spiegelt y2 nur das eigene Attribut wider, nicht den geerbten Wert.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. SMIL-Animationen (animVal ungleich baseVal) funktionieren in Chromium, Firefox und Safari.

Siehe auch

SVGLinearGradientElement SVGLinearGradientElement.x1 SVGLinearGradientElement.y1 SVGLinearGradientElement.x2 SVGAnimatedLength SVGLength SVGGradientElement