Signatur
Beschreibung
SVGRadialGradientElement ist die DOM-Schnittstelle für das Element <radialGradient>. Ein radialer Verlauf breitet sich kreisförmig von einem Brennpunkt (fx, fy, fr) zu einem Endkreis (cx, cy, r) aus. Die Farbstufen legen die <stop>-Kindelemente fest. Den Verlauf bindest du über fill="url(#id)" oder stroke="url(#id)" an Formen.
Die Schnittstelle erbt von SVGGradientElement und bekommt darüber gradientUnits, gradientTransform, spreadMethod und href. Selbst ergänzt sie die geometrischen Eigenschaften cx, cy, r, fx, fy und fr. Alle sind schreibgeschützte Objekte vom Typ SVGAnimatedLength. Den eigentlichen Wert liest und setzt du über .baseVal. Den gerade animierten Wert (etwa durch SMIL) liefert .animVal.
Einsatzfälle sind zum Beispiel Lichteffekte und Glanzpunkte, die der Maus folgen, Spotlights, Kugeln mit 3D-Anmutung und dynamisch erzeugte Diagramme. Neue Instanzen erzeugst du immer mit document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"). Einen öffentlichen Konstruktor gibt es nicht.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $cx | SVGAnimatedLength | 50% | Eigenschaft (schreibgeschützt): x-Koordinate des Endkreis-Mittelpunkts, entspricht dem Attribut cx. |
| $cy | SVGAnimatedLength | 50% | Eigenschaft (schreibgeschützt): y-Koordinate des Endkreis-Mittelpunkts, entspricht dem Attribut cy. |
| $r | SVGAnimatedLength | 50% | Eigenschaft (schreibgeschützt): Radius des Endkreises. Bei 0 wird die Fläche in der Farbe des letzten Stopps gefüllt. |
| $fx | SVGAnimatedLength | Wert von cx | Eigenschaft (schreibgeschützt): x-Koordinate des Brennpunkts, an dem der Verlauf beginnt. |
| $fy | SVGAnimatedLength | Wert von cy | Eigenschaft (schreibgeschützt): y-Koordinate des Brennpunkts. |
| $fr | SVGAnimatedLength | 0% | Eigenschaft (schreibgeschützt, SVG 2): Radius des Brennkreises. |
Rückgabewert
createElementNS(), querySelector() oder getElementById() erhältst. Ihre Geometrie-Eigenschaften liefern jeweils ein SVGAnimatedLength.Beispiele
Radialen Verlauf per Skript erzeugen
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
const defs = document.createElementNS(SVG_NS, "defs");
const grad = document.createElementNS(SVG_NS, "radialGradient");
grad.id = "kugel";
grad.setAttribute("cx", "50%");
grad.setAttribute("cy", "50%");
grad.setAttribute("r", "50%");
grad.setAttribute("fx", "30%");
grad.setAttribute("fy", "30%");
[["0%", "#ffffff"], ["100%", "#1e40af"]].forEach(([offset, color]) => {
const stop = document.createElementNS(SVG_NS, "stop");
stop.setAttribute("offset", offset);
stop.setAttribute("stop-color", color);
grad.append(stop);
});
defs.append(grad);
const circle = document.createElementNS(SVG_NS, "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "90");
circle.setAttribute("fill", "url(#kugel)");
svg.append(defs, circle);
document.body.append(svg);
console.log(grad instanceof SVGRadialGradientElement);Geometrie über baseVal auslesen
// <radialGradient id="kugel" cx="50%" r="40%" fx="30%"> im Dokument
const grad = document.getElementById("kugel");
const { cx, r, fx } = grad;
console.log(cx.baseVal.valueAsString);
console.log(r.baseVal.valueInSpecifiedUnits);
console.log(r.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(fx.baseVal.valueAsString);Glanzpunkt folgt der Maus
const svg = document.querySelector("svg");
const grad = document.getElementById("kugel");
svg.addEventListener("pointermove", (event) => {
const rect = svg.getBoundingClientRect();
const x = ((event.clientX - rect.left) / rect.width) * 100;
const y = ((event.clientY - rect.top) / rect.height) * 100;
// Prozentwerte, da gradientUnits="objectBoundingBox" (Standard)
grad.fx.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, x);
grad.fy.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, y);
});Spotlight in Nutzerkoordinaten mit gradientUnits
const grad = document.getElementById("spot");
grad.setAttribute("gradientUnits", "userSpaceOnUse");
// Jetzt sind Werte absolute Nutzerkoordinaten
grad.cx.baseVal.value = 120;
grad.cy.baseVal.value = 80;
grad.r.baseVal.value = 60;
console.log(grad.gradientUnits.baseVal === SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE);
console.log(grad.getAttribute("r"));