SVGRectElement.rx — Eigenschaft · JavaScript-Referenz

Signatur

get SVGRectElement.rx

Beschreibung

Die Eigenschaft rx des Interfaces SVGRectElement spiegelt das Attribut rx eines <rect>-Elements wider. Sie bestimmt den horizontalen Radius der abgerundeten Ecken. Zusammen mit ry ergibt sich eine elliptische Eckenrundung.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Der Wert lässt sich aber über das zurückgegebene SVGAnimatedLength-Objekt ändern, genauer über rx.baseVal.value, rx.baseVal.valueAsString oder rx.baseVal.newValueSpecifiedUnits(). rx.animVal liefert den aktuell angezeigten Wert, also auch während einer SMIL-Animation.

Nützlich ist rx, wenn Sie Eckenrundungen per Skript auslesen oder dynamisch anpassen möchten, etwa bei interaktiven Diagrammen, Buttons in SVG oder Animationen ohne CSS. Fehlt das Attribut, gilt auto. Dann wird der Wert von ry übernommen. Fehlen beide, gibt es keine Rundung.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

Eckenradius auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '200');
rect.setAttribute('height', '100');
rect.setAttribute('rx', '15');
svg.append(rect);
document.body.append(svg);

console.log(rect.rx.baseVal.value);
console.log(rect.rx.baseVal.valueAsString);

15 15

Eckenradius per Skript ändern

const rect = document.querySelector('rect');

// Neuer Wert über baseVal – das Attribut wird automatisch aktualisiert
rect.rx.baseVal.value = 30;
console.log(rect.getAttribute('rx'));

// Mit Einheit setzen (Prozent bezogen auf die Viewport-Breite)
rect.rx.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(rect.getAttribute('rx'));

30 10%

Button beim Hovern abrunden

const button = document.querySelector('#svg-button rect');
const original = button.rx.baseVal.value;

button.addEventListener('mouseenter', () => {
  button.rx.baseVal.value = original * 2;
  button.ry.baseVal.value = original * 2;
});

button.addEventListener('mouseleave', () => {
  button.rx.baseVal.value = original;
  button.ry.baseVal.value = original;
});

Unterschied zwischen baseVal und animVal

// <rect rx="5" ...><animate attributeName="rx" from="5" to="40" dur="2s" repeatCount="indefinite"/></rect>
const rect = document.querySelector('rect');

setInterval(() => {
  console.log(`Basis: ${rect.rx.baseVal.value}, aktuell: ${rect.rx.animVal.value.toFixed(1)}`);
}, 500);

Basis: 5, aktuell: 13.7 Basis: 5, aktuell: 22.4 ...

// Wichtig · Fallstricke

Direkte Zuweisung klappt nicht: rect.rx = 10 ändert nichts und wirft im Strict Mode einen TypeError. Ändern Sie den Wert immer über rect.rx.baseVal.
auto und fehlendes Attribut: Ohne rx-Attribut liefert baseVal.value meist 0, obwohl der Browser beim Zeichnen den Wert von ry übernimmt. Den tatsächlich verwendeten Wert erhalten Sie zuverlässiger über getComputedStyle(rect).rx.
Begrenzung: Ist rx größer als die halbe Breite, wird der Wert beim Zeichnen auf width / 2 gekürzt. Der DOM-Wert bleibt dabei unverändert.
CSS hat Vorrang: Seit SVG 2 ist rx auch eine CSS-Eigenschaft. Eine CSS-Regel wie rect { rx: 8px; } überschreibt das Attribut. Änderungen über baseVal sind dann nicht sichtbar.
Prozentwerte beziehen sich auf die Breite des Viewports, nicht auf die Breite des Rechtecks.
Kompatibilität: Wird von allen modernen Browsern unterstützt. animVal wird nur durch SMIL-Animationen verändert, nicht durch CSS-Animationen.

Siehe auch

SVGRectElement.ry SVGRectElement.width SVGRectElement.height SVGRectElement SVGAnimatedLength SVGLength HTMLSourceElement.src