<rect>
Элемент <rect> — это основная фигура SVG, которая рисует прямоугольники, определяемые их положением, шириной и высотой. У прямоугольников могут быть скругленные углы.
Пример
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- Simple rectangle --> <rect width="100" height="100" /> <!-- Rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg>
Атрибуты
x-
Координата x прямоугольника. Тип значения: <length>|<percentage> ; Значение по умолчанию:
0; Анимируемо: да y-
Координата y прямоугольника. Тип значения: <length>|<percentage> ; Значение по умолчанию:
0; Анимируемо: да width-
Ширина прямоугольника. Тип значения:
auto|<length>|<percentage> ; Значение по умолчанию:auto; Анимируемо: да height-
Высота прямоугольника. Тип значения:
auto|<length>|<percentage> ; Значение по умолчанию:auto; Анимируемо: да rx-
Радиус горизонтального скругления углов прямоугольника. По умолчанию
ry, если указано. Тип значения:auto|<length>|<percentage> ; Значение по умолчанию:auto; Анимируемо: да ry-
Радиус вертикального скругления углов прямоугольника. По умолчанию
rx, если указано. Тип значения:auto|<length>|<percentage> ; Значение по умолчанию:auto; Анимируемо: да pathLength-
Общая длина периметра прямоугольника в единицах пользователя. Тип значения: <number> ; Значение по умолчанию: нет; Анимируемо: да
Примечание: Начиная с SVG2, x, y, width, height, rx и ry являются геометрическими свойствами, что означает, что эти атрибуты также могут использоваться в качестве свойств CSS для этого элемента.
Контекст использования
| Категории | Основной элемент фигуры, Элемент графики, Элемент фигуры |
|---|---|
| Разрешённое содержимое | Любое количество следующих элементов в любом порядке: Элементы анимации Дескриптивные элементы |
Спецификации
| Спецификация |
|---|
| Scalable Vector Graphics (SVG) 2 # RectElement |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
rect |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
fill |
1 | 79 | 1.5 | 15 | 3.1 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
height |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
rx |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
ry |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
systemLanguage |
1 | 12 | 12 | ≤12.1 | 3.1 | 18 | 14 | ≤12.1 | 2 | 1.0 | 3 |
width |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
x |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
y |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
См. также
-
Атрибуты презентации SVG, включая
fillиstroke - Другие основные фигуры SVG:
<circle>,<ellipse>,<line>,<polygon>,<polyline>
© 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/Element/rect
