<rect>
Базовая поддержка Широко доступно *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
* Некоторые части этой функции могут поддерживаться на разных уровнях.
Элемент <rect> SVG — это базовая фигура 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-свойства этого элемента.
Интерфейс DOM
Этот элемент реализует интерфейс SVGRectElement.
Пример
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- Regular rectangle --> <rect width="100" height="100" /> <!-- Rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg>
Спецификации
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
rect |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
fill |
1 | 79 | 1.5 | 15 | 3.1 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
height |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
rx |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
ry |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
systemLanguage |
1 | 12 | 12 | ≤12.1 | 3.1 | 18 | 14 | ≤12.1 | 2 | 1.0 | 3 | 2 |
width |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
x |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
y |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
См. также
-
Атрибуты представления SVG, включая
fillиstroke - Другие базовые фигуры SVG:
<circle>,<ellipse>,<line>,<polygon>,<polyline>
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect
