SVG <прямоугольник>

SVG-формы

SVG имеет несколько предопределенных элементов формы, которые могут использоваться разработчиками:

• Прямоугольник <прямоугольник>
• Круг <круг>
• Эллипс <эллипс>
• Строка <строка>
• Полилиния <полилиния>
• Многоугольник <полигон>
• Путь <путь>

В следующих главах будет объяснен каждый элемент, начиная с элемента rect.

Прямоугольник SVG — <прямоугольник>

Пример 1

Элемент <rect> используется для создания прямоугольника и вариаций прямоугольной формы:

Вот SVG-код:

Объяснение кода:

• Атрибуты ширины и высоты элемента <rect> определяют высоту и ширину прямоугольника.
• Атрибут стиля используется для определения свойств CSS для прямоугольника.
• CSS-свойство fill определяет цвет заливки прямоугольника.
• Свойство CSS stroke-width определяет ширину границы прямоугольника.
• Свойство CSS Stroke определяет цвет границы прямоугольника.

Пример 2

Давайте посмотрим на другой пример, который содержит некоторые новые атрибуты:

Вот SVG-код:

Объяснение кода:

• Атрибут x определяет левую позицию прямоугольника (например, x="50" помещает прямоугольник на 50 пикселей от левого поля)
• Атрибут y определяет верхнюю позицию прямоугольника (например, y="20" помещает прямоугольник на 20 пикселей от верхнего поля)
• Свойство CSS fill-opacity определяет непрозрачность цвета заливки (допустимый диапазон: от 0 до 1).
• Свойство CSS stroke-opacity определяет непрозрачность цвета обводки (допустимый диапазон: от 0 до 1).

Пример 3

Определите непрозрачность для всего элемента:

Вот SVG-код:

Объяснение кода:

• Свойство CSS opacity определяет значение прозрачности для всего элемента (допустимый диапазон: от 0 до 1).

Пример 4

В последнем примере создайте прямоугольник с закругленными углами:

Вот SVG-код:

Объяснение кода:

• Атрибуты rx и ry закругляют углы прямоугольника.