SVGLinearGradientElement.y1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGLinearGradientElement.y1

Beschreibung

Die Eigenschaft y1 des Interfaces SVGLinearGradientElement gibt das Attribut y1 eines <linearGradient>-Elements als SVGAnimatedLength-Objekt zurück. Zusammen mit x1 legt sie den Startpunkt des Verlaufsvektors fest. Die Farben aus den <stop>-Elementen werden entlang der Linie von (x1, y1) nach (x2, y2) verteilt.

Die Eigenschaft selbst ist schreibgeschützt – du kannst ihr kein neues Objekt zuweisen. Der Wert lässt sich aber über y1.baseVal ändern (z. B. mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits()). y1.animVal enthält den aktuellen, ggf. durch SMIL-Animation veränderten Wert und ist nur lesbar.

Wie der Wert interpretiert wird, hängt von gradientUnits ab: Bei objectBoundingBox (Standard) bezieht er sich auf die Bounding Box des gefüllten Elements (0 = oben, 1 bzw. 100% = unten); bei userSpaceOnUse handelt es sich um Koordinaten im Benutzerkoordinatensystem. Fehlt das Attribut, gilt der Standardwert 0%.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (veränderbarer Basiswert, SVGLength) und animVal (aktueller animierter Wert, nur lesbar).

Beispiele

Startpunkt des Verlaufs auslesen

// <svg><defs><linearGradient id="verlauf" x1="0" y1="0.2" x2="0" y2="1">...</linearGradient></defs></svg>
const gradient = document.getElementById('verlauf');
const { baseVal } = gradient.y1;

console.log(baseVal.value);          // numerischer Wert
console.log(baseVal.valueAsString);  // Wert als String
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

0.2 "0.2" true

Vertikalen Verlauf per JavaScript erzeugen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const defs = svg.querySelector('defs') ?? svg.appendChild(document.createElementNS(NS, 'defs'));

const grad = document.createElementNS(NS, 'linearGradient');
grad.id = 'himmel';

// Von oben (0 %) nach unten (100 %) statt Standard links → rechts
grad.x2.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 0);
grad.y1.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 0);
grad.y2.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);

for (const [offset, color] of [['0', '#1e3a8a'], ['1', '#93c5fd']]) {
  const stop = document.createElementNS(NS, 'stop');
  stop.setAttribute('offset', offset);
  stop.setAttribute('stop-color', color);
  grad.append(stop);
}
defs.append(grad);

console.log(grad.getAttribute('y1'), grad.getAttribute('y2'));

0% 100%

Verlaufsstart interaktiv mit einem Schieberegler verschieben

// <input type="range" id="regler" min="0" max="100" value="0">
const grad = document.getElementById('himmel');
const regler = document.getElementById('regler');

regler.addEventListener('input', () => {
  // valueAsString setzt Wert inkl. Einheit; das Attribut wird synchronisiert
  grad.y1.baseVal.valueAsString = `${regler.value}%`;
  console.log('y1 =', grad.getAttribute('y1'));
});

y1 = 42%

// Wichtig · Fallstricke

Nicht direkt zuweisen: grad.y1 = 0.5 hat keine Wirkung (bzw. wirft im Strict Mode einen TypeError). Ändere stattdessen grad.y1.baseVal.value oder nutze setAttribute('y1', …).
gradientUnits beachten: Bei objectBoundingBox sind Werte relativ (0–1 bzw. %); absolute Pixelwerte wie 50 schieben den Startpunkt dann weit aus dem Element heraus. Bei userSpaceOnUse gelten Koordinaten des Benutzerraums.
baseVal.value bei Prozentwerten ohne Bezugsgröße (z. B. Element nicht gerendert) kann je nach Browser ungenau sein – für Prozentangaben lieber valueInSpecifiedUnits verwenden.
Über href geerbte Verläufe: y1 spiegelt nur das eigene Attribut wider, nicht den vom referenzierten Verlauf geerbten Wert.
Wird in allen modernen Browsern unterstützt; animVal weicht nur bei SMIL-Animationen (<animate attributeName=\"y1\">) von baseVal ab.

Siehe auch

SVGLinearGradientElement SVGLinearGradientElement.x1 SVGLinearGradientElement.x2 SVGLinearGradientElement.y2 SVGAnimatedLength SVGLength SVGGradientElement