Рисование прямоугольника с помощью SVG <rect>

Элемент rect является базовой формой SVG, используемой для создания прямоугольников, основанных на положении угла и его ширине и высоте. Он также может использоваться для создания закругленных прямоугольников.

Элемент <rect> SVG представляет собой прямоугольник. Используя этот элемент, вы можете нарисовать прямоугольник с различными ширинами, высотами, различными контурами (轮廓ами) и цветами заливки, острыми или закругленными углами и т.д.

Онлайн пример

Пример использования rect:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

Позиция прямоугольника определяется свойствами x и y. Помните, что это положение относительно любого закрытого (родительского) элемента.
Размер прямоугольника определяется свойствами width и height.
Свойство style позволяет вам установить другие стили, такие как цвет обводки и заливки, ширину обводки и т.д. Это будет более подробно рассмотрено в других текстах.
Это изображение созданного прямоугольника:

Закругленный прямоугольник

Можно нарисовать закругленные углы на прямоугольнике. Свойства rx и ry определяют закругления углов. Свойство rx определяет ширину закругления, а свойство ry определяет высоту закругления. Здесь есть три прямоугольника с rx и ry, установленными分别为 5, 10 и 15. Обратите внимание на различия в размерах закруглений.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="50" width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
　　　　<rect x="130" y="10" height="50" width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
</svg>

Эффект закругленных прямоугольников, созданных, следующий:

В этих примерах, для каждого прямоугольника значения rx и ry установлены одинаковыми. Если устанавливается только свойство rx, то свойство ry получит значение, равное rx. Это быстрый способ определить равномерные закругления углов.
Это пример двух прямоугольников, у которых значение свойства rx установлено в 10, но значение свойства ry установлено соответственно 5 и 15. Это покажет, как видятся закругленные прямоугольники при различных высотах и ширинах.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="50" width="50"
　　　　　　　　　　rx="10" ry="5"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
　　　　<rect x="130" y="10" height="50" width="50"
　　　　　　　　　　rx="10" ry="15"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
</svg>

Обводка прямоугольника

Вы можете использовать атрибут stroke style SVG для настройки стиля рамки (контура) прямоугольника. В этом примере цвет рамки установлен на темно-зеленый, а ширина рамки составляет 3:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　　　fill: #009900;
　　　　　　"
　　　　　　</svg>

Визуальный вид элемента rect в браузере:

Вы также можете использовать атрибут style property stroke-dasharray для создания сплошной линии рамки прямоугольника. Пример:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　　　stroke-dasharray: 10 5;
　　　　　　　　　　　　　fill: #009900;
　　　　　　　　　　　　"
　　　　　　　　</svg>

Результат выполнения кода следующий::

Наполнение прямоугольника

Вы можете использовать атрибут fill style SVG для наполнения прямоугольника. Например, вы можете выбрать не наполнять элемент, установив атрибут style property fill в none.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke: #009900;fill: none;"　/></svg>

Визуальный вид элемента rect без наполнения в браузере:

Вы также можете заполнить прямоугольник цветом. В этом примере rect заполнен ярким зеленым:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke: #009900;fill: #33ff33;"/>
</svg>

Ниже показан эффект наполнения rect в браузере:

Вы также можете использовать атрибут style property fill-opacity для создания прозрачного наполнения. В этом примере показаны два прямоугольника, один из которых частично находится над другим, а верхний прямоугольник полупрозрачный:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　</svg>

Вот полупрозрачный вид элемента rect при его отображении в браузере:

В этом примере, контур второго прямоугольника не прозрачен, но вы можете использовать атрибут style property stroke-opacity, чтобы сделать его прозрачным.