rx

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

Вы можете использовать этот атрибут со следующими элементами SVG:

Пример

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>, rx определяет радиус по оси X фигуры. При значении, равном или меньше нуля, эллипс не будет отрисован.

Значение	<длина> \| <процент> \| `auto`
Значение по умолчанию	`auto`
Анимируемо	Да

Примечание: Радиус по оси X <ellipse> также можно определить с помощью свойства геометрии rx. Если установлено в CSS, значение свойства rx переопределяет значение атрибута rx.

прямоугольник

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

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

Если для rx указано правильное значение, но для ry нет (или наоборот), то браузер примет пропущенное значение равным заданному.
Если ни rx , ни ry не имеют должным образом заданного значения, то браузер нарисует прямоугольник с квадратными углами.
Если rx больше половины ширины прямоугольника, то браузер примет значение для rx за половину ширины прямоугольника.

Значение	<длина> \| <процент> \| `auto`
Значение по умолчанию	`auto`
Анимируемо	Да

Примечание: Горизонтальная кривая углов <rect> также может быть определена с помощью свойства геометрии rx. Если установлено в CSS, значение свойства rx переопределяет значение атрибута rx.

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # RX

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx