rx
Атрибут rx
определяет радиус круга по оси x.
Пример
<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.
Спецификации
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RX |