rx

Атрибут rx определяет радиус круга по оси x.

Два элемента используют этот атрибут: <ellipse> и <rect>

Пример

html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>

ellipse

Для элемента <ellipse> rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

Значение <length> | <percentage> | auto
Значение по умолчанию auto
Анимируемый Да

Примечание: Начиная с SVG2, rx - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

rect

Для <rect>, rx определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

Способ интерпретации значения атрибута rx зависит как от атрибута ry , так и от ширины прямоугольника:

  • Если правильно задано значение для rx, но не для ry (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
  • Если ни rx, ни ry не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
  • Если rx больше половины ширины прямоугольника, то браузер будет считать значение rx половиной ширины прямоугольника.
Значение <length> | <percentage> | auto
Значение по умолчанию auto
Анимируемый Да

Примечание: Начиная с SVG2, rx - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для rect.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# RX