SVGCircleElement.r — Eigenschaft · JavaScript-Referenz

Signatur

SVGCircleElement.r

Beschreibung

Die Eigenschaft r der Schnittstelle SVGCircleElement gibt ein SVGAnimatedLength-Objekt zurück, das das r-Attribut eines <circle>-Elements abbildet. Das Attribut legt den Radius des Kreises fest.

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann circle.r kein neues Objekt zuweisen. Den Radius ändert man trotzdem über das zurückgegebene Objekt, nämlich über circle.r.baseVal.value (in Benutzereinheiten) oder circle.r.baseVal.valueAsString (mit Einheit, z. B. "20%"). Den aktuell angezeigten Wert, auch während einer SMIL-Animation, liefert circle.r.animVal.

Gebraucht wird r vor allem bei dynamischen Grafiken, zum Beispiel für Diagramme, Punktwolken, Ladeanzeigen oder interaktive Visualisierungen. Gegenüber getAttribute("r") hat die Eigenschaft einen Vorteil: Man erhält direkt einen Zahlenwert, und Einheiten wie % oder em werden bereits umgerechnet.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert aus dem Attribut, veränderbar) und animVal (aktuell angezeigter, eventuell animierter Wert, nur lesbar). Beide sind vom Typ SVGLength.

Beispiele

Radius auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
svg.append(circle);
document.body.append(svg);

console.log(circle.r.baseVal.value);
console.log(circle.r.baseVal.valueAsString);

40 "40"

Radius per Skript ändern (Hover-Effekt)

const circle = document.querySelector('circle');
const originalRadius = circle.r.baseVal.value;

circle.addEventListener('mouseenter', () => {
  circle.r.baseVal.value = originalRadius * 1.5;
});
circle.addEventListener('mouseleave', () => {
  circle.r.baseVal.value = originalRadius;
});

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

"40"

Pulsierende Animation mit requestAnimationFrame

const circle = document.querySelector('circle');
const base = 30;

const pulse = (time) => {
  // Radius schwankt zwischen 20 und 40
  circle.r.baseVal.value = base + Math.sin(time / 300) * 10;
  requestAnimationFrame(pulse);
};
requestAnimationFrame(pulse);

Prozentwert und Einheit umwandeln

const circle = document.querySelector('circle');
circle.r.baseVal.valueAsString = '25%';

console.log(circle.r.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(circle.r.baseVal.valueInSpecifiedUnits);
// In Benutzereinheiten umrechnen (hängt von der Viewport-Größe ab)
console.log(circle.r.baseVal.value);

true 25 (z. B. 35.35 bei einem 200×200-Viewport)

// Wichtig · Fallstricke

Schreibgeschützt heißt nicht unveränderbar: circle.r = 50 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Richtig ist circle.r.baseVal.value = 50.
animVal ist nur lesbar: Schreibversuche auf circle.r.animVal.value lösen einen NoModificationAllowedError aus.
Prozentwerte werden in Bezug auf die normalisierte Diagonale des Viewports berechnet, also √((b² + h²) / 2). Sie hängen nicht von der Breite allein ab.
CSS hat Vorrang: Seit SVG 2 ist r eine geometrische CSS-Eigenschaft. Ein Wert wie circle { r: 10px } im Stylesheet kann das Attribut überschreiben. baseVal gibt dann trotzdem weiter den Attributwert zurück. Den tatsächlich verwendeten Wert liefert getComputedStyle(circle).r.
Negative Radien sind ungültig. Ein Radius von 0 schaltet die Darstellung ab.
Elemente muss man mit createElementNS und dem SVG-Namensraum erzeugen. Mit document.createElement('circle') entsteht nur ein HTMLUnknownElement, das keine r-Eigenschaft hat.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGCircleElement SVGCircleElement.cx SVGCircleElement.cy SVGAnimatedLength SVGLength SVGEllipseElement.rx Document.createElementNS()