rx

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

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

Пример

html,
body,
svg {
  height: 100%;
}

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