В SVG есть несколько предопределенных элементов, позволяющих разработчику рисовать различные фигуры:
- Прямоугольник <rect>
- Круг <circle>
- Эллипс <ellipse>
- Прямая линия <line>
- Ломаная линия <polyline>
- Многоугольник <polygon>
- Контур <path>
В следующих главах будет рассмотрен каждый элемент, и начнем мы с прямоугольника.
SVG прямоугольник - <rect>
Пример №1
Для создания прямоугольника и различных его вариаций используется элемент <rect>:
SVG код:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Объяснение:
- Атрибуты width и height элемента <rect> определяют ширину и высоту прямоугольника
- Атрибут style определяет CSS свойства прямоугольника
- CSS свойство fill определяет цвет заливки прямоугольника
- CSS свойство stroke-width определяет толщину рамки прямоугольника
- CSS свойство stroke определяет цвет рамки прямоугольника
Пример №2
В следующем примере используются новые атрибуты:
SVG код:
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Объяснение:
- Атрибут x определяет позицию прямоугольника слева (например, x="50" помещает прямоугольник в 50px от левого отступа)
- Атрибут y определяет позицию прямоугольника сверху (например, y="20" помещает прямоугольник в 20px от верхнего отступа)
- CSS свойство fill-opacity определяет прозрачность цвета заливки (допустимый диапазон: от 0 до 1)
- CSS свойство stroke-opacity определяет прозрачность цвета прорисовки (допустимый диапазон: от 0 до 1)
Пример №3
Определяем прозрачность всего элемента:
SVG код:
<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" />
</svg>
Объяснение:
- CSS свойство opacity определяет значение прозрачности для всего элемента (допустимый диапазон: от 0 до 1)
Пример №4
В последнем примере создадим прямоугольник с закругленными углами:
SVG код:
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Объяснение:
- Атрибуты rx и ry закругляют углы прямоугольника
