This page was translated from English by the community. Learn more and join the MDN Web Docs community.
rx
Атрибут rx определяет радиус круга по оси x.
Пример
html,
body,
svg {
height: 100%;
}
<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 |