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

Спецификация Статус Комментарий
Scalable Vector Graphics (SVG) 2
Определение 'rx' в этой спецификации.		 Кандидат в рекомендации Определяется как свойство геометрии
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение 'rx' в этой спецификации.		 Рекомендация Начальное определение для <ellipse>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение 'rx' в этой спецификации.		 Рекомендация Начальное определение для <rect>