SVGRectElement: свойство rx

Свойство rx только для чтения интерфейса SVGRectElement описывает горизонтальную кривизну углов SVG-прямоугольника в виде SVGAnimatedLength. Длина измеряется в единицах системы координат пользователя по оси x. Синтаксис аналогичен синтаксису для <length>.

Оно отражает представленное атрибут элемента <rect> rx. Свойство CSS rx имеет приоритет над представленным атрибутом SVG rx, поэтому значение может не отражать фактический размер закруглённых углов. Значение по умолчанию 0, что рисует прямоугольник с прямыми углами.

Тип SVGAnimatedLength.

Рассмотрим следующий SVG:

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="60" height="60" rx="15" ry="15" />
  <rect x="60" y="0" width="60" height="60" rx="15%" ry="15" />
</svg>

Мы можем получить вычисленные значения атрибутов rx:

const rectangles = document.querySelectorAll("rect");
const rxSize0 = rectangle[0].rx;
const rxSize1 = rectangle[1].rx;
console.log(rxSize0.baseVal.value); // output: 15 (the value of `rx`)
console.log(rxSize1.baseVal.value); // output: 45 (15% of 300)

• SVGRectElement.ry