SVGRectElement.ry — Eigenschaft · JavaScript-Referenz

Signatur

SVGRectElement.ry

Beschreibung

Die Eigenschaft ry der Schnittstelle SVGRectElement entspricht dem Attribut ry eines <rect>-Elements. Sie legt fest, wie stark die Ecken des Rechtecks vertikal abgerundet werden. Zusammen mit rx (horizontaler Radius) ergibt sich eine elliptische Eckrundung.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Das zurückgegebene SVGAnimatedLength-Objekt bietet aber zwei Unterobjekte vom Typ SVGLength: baseVal (der im DOM gesetzte Grundwert, beschreibbar) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert, nur lesbar). Über ry.baseVal.value lässt sich der Radius also sehr wohl ändern.

Einsatzgebiete sind z. B. dynamisch erzeugte Diagramme, Buttons oder Karten in SVG, bei denen die Rundung abhängig von Größe oder Zustand angepasst werden soll. Alternativ kann auch die CSS-Eigenschaft ry (SVG 2) verwendet werden, die Vorrang vor dem Attribut hat.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal und animVal (jeweils SVGLength). baseVal.value liefert den Radius in Benutzereinheiten; ist das Attribut nicht gesetzt, ist der Wert 0 bzw. wird automatisch aus rx übernommen (Darstellung).

Beispiele

Vertikalen Eckenradius auslesen

// <svg><rect id="karte" width="200" height="100" rx="20" ry="10" /></svg>
const rect = document.getElementById('karte');

console.log(rect.ry.baseVal.value);      // Grundwert
console.log(rect.ry.animVal.value);      // aktueller (animierter) Wert
console.log(rect.ry.baseVal.valueAsString);

10 10 "10"

Radius per Skript ändern (Hover-Effekt)

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

rect.addEventListener('mouseenter', () => {
  rect.rx.baseVal.value = 25;
  rect.ry.baseVal.value = 25;
});

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

Rechteck dynamisch erzeugen und Radius in Prozent setzen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '150');

const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('width', '300');
rect.setAttribute('height', '150');
rect.setAttribute('fill', 'teal');

// ry als Prozentwert (bezogen auf die Viewport-Höhe)
rect.ry.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);

svg.append(rect);
document.body.append(svg);

console.log(rect.getAttribute('ry'));
console.log(rect.ry.baseVal.value); // in Benutzereinheiten umgerechnet

10% 15

Zuweisung an ry selbst schlägt fehl

'use strict';
const rect = document.querySelector('rect');
try {
  rect.ry = 12; // Eigenschaft ist schreibgeschützt
} catch (err) {
  console.log(err instanceof TypeError);
}

true

// Wichtig · Fallstricke

Schreibgeschützt: rect.ry = 10 hat keine Wirkung (im Strict Mode TypeError). Ändern Sie stattdessen rect.ry.baseVal.value oder nutzen Sie setAttribute('ry', …).
Automatik mit rx: Ist nur eines der Attribute rx/ry angegeben, verwendet der Browser für die Darstellung denselben Wert für beide. ry.baseVal.value meldet in diesem Fall aber weiterhin 0, da das Attribut nicht gesetzt ist.
Begrenzung: Werte größer als die halbe Höhe werden bei der Darstellung auf height / 2 gekappt; negative Werte sind ein Fehler und werden ignoriert.
CSS-Vorrang: In SVG 2 ist ry auch eine CSS-Eigenschaft. Eine CSS-Regel überschreibt das Attribut optisch, baseVal spiegelt jedoch nur das Attribut wider – für den berechneten Wert getComputedStyle(rect).ry nutzen.
Kompatibilität: Die DOM-Eigenschaft wird von allen modernen Browsern unterstützt; die CSS-Eigenschaft ry ist in älteren Safari-Versionen nicht verfügbar.

Siehe auch

SVGRectElement SVGRectElement.rx SVGRectElement.height SVGAnimatedLength SVGLength Element.setAttribute() HTMLTextAreaElement.rows