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 |