Прямоугольник SVG
Описание элемента <rect>
Элемент SVG <rect> создаёт прямоугольник, а также его вариации. Можно рисовать прямоугольники разной высоты и ширины, с разными цветами обводки и заливки и т. д. Попробуем несколько примеров.
Пример элемента SVG <rect>:
Пример элемента SVG <rect>:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="350" height="120">
<rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
</svg>
</body>
</html>Давайте разберём этот код:
- Атрибуты width и height задают ширину и высоту прямоугольника.
- Атрибут style задаёт некоторые CSS-свойства для прямоугольника.
- Свойство CSS fill задаёт цвет заливки прямоугольника.
- Свойство CSS stroke-width используется для задания ширины границы прямоугольника.
- Свойство CSS stroke задаёт цвет границы прямоугольника.
Пример элемента SVG <rect> с атрибутами x и y:
Пример элемента SVG <rect> с атрибутами x и y
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250">
<rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Разберём приведённый выше код:
- Атрибут x задаёт левое положение прямоугольника.
- Атрибут y задаёт верхнее положение прямоугольника.
- По умолчанию, если x и y опущены, они устанавливаются в 0.
- Свойство CSS fill-opacity задаёт прозрачность цвета заливки.
- Свойство CSS stroke-opacity задаёт прозрачность цвета обводки.
Пример элемента SVG <rect> со свойством CSS opacity:
Пример элемента SVG <rect> со свойством CSS opacity
html
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Пример элемента SVG <rect> с атрибутами rx и ry:
Пример элемента SVG <rect> с атрибутами rx и ry
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="350" height="240">
<rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Разберём приведённый выше код:
- Атрибут rx задаёт горизонтальный радиус закруглённых углов прямоугольника.
- Атрибут ry задаёт вертикальный радиус закруглённых углов прямоугольника.
Практика
Какие атрибуты можно указать для прямоугольников SVG в HTML?