<line>
<polyline>
<circle>
<ellipse>
<rect>
<polygon>
Нарисовать простую прямую линию просто. Указываем координаты двух точек, и между ними будет проведена линия.
Для рисования одной линии используется тег line. Значения атрибутов x1 и y1 устанавливают координаты начала линии, а значения x2 и y2 — определяют конец линии. Если пропустить одну из координат, то её значение будет равно 0. По умолчанию используется чёрный цвет и отсутствие обводки stroke.
Обязательно указывайте атрибут stroke-width, иначе линия будет невидимой.
<svg width="900" height="80">
<line x1="0" y1="0" x2="200" y2="70" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>
Для рисования нескольких линий используется тег polyline, который определяет набор соединённых отрезков прямой линии, что в результате даёт, как правило, незамкнутую фигуру (начало и конец точек которой не связаны).
Значения в points определяют положение фигуры по осям x и y от начала до конца фигуры и разбиты по парам (x,y) во всём списке значений. Нечётное число точек является ошибкой.
<svg width="900" height="80">
<polyline
points="0,40 30,0 60,40 285,40"
style="fill:none;stroke:rgb(255,0,0);stroke-width:2">
</polyline>
</svg>
Чтобы определить линию с использованием тега polyline, мы задаём набор точек. Первая точка смещена на 0 пикселей вправо и на 40 пикселей вниз. Затем линия перемещается в точку на 30 пикселей вправо и 0 пикселей вниз от начала координат; так создаётся первый отрезок. Следующая точка смещена на 60 пикселей вправо и 40 пикселей вниз, а последняя точка — на 285 пикселей вправо и 40 пикселей вниз. Атрибут style определяет толщину и цвет линии.
Фигура не становится замкнутой автоматически, если первая и последняя точки не совпадают. Мы можем применить атрибут fill для закраски фигуры, но результат будет не совсем такой, как при закраске замкнутых фигур.
<svg viewBox="0 0 100 70" width="100" height="70">
<polyline
points="0,40 30,0 60,40 285,40"
style="fill:green;
stroke:rgb(255,0,0);
stroke-width:2">
</polyline>
</svg>
Элемент <circle> строится на основе центральной точки и внешнего радиуса. Фигура позиционируется с помощью атрибутов cx и cy относительно левого верхнего угла SVG-элемента. Атрибут r задаёт радиус. Закрасить круг можно через атрибут fill.
Нарисуем круг.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<circle cx="100" cy="100" r="80" fill="red" />
</svg>
Также можно указать обводку - ширину и цвет.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<circle cx="100" cy="100" r="80" fill="red"
stroke-width="15" stroke="black" />
</svg>
Можно перенести часть кода из SVG в CSS.
<style>
svg {
width: 200px;
height: 200px;
}
.greencircle {
fill: green;
stroke: magenta;
stroke-width: 10;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" class="greencircle" />
</svg>
Сочетание нескольких кругов позволят нам создать щит Капитана Америки.
<svg viewBox="0 0 500 500">
<title>Captain America's Shield</title>
<circle cx="250" cy="250" r="250" fill="red" />
<circle cx="250" cy="250" r="200" fill="white" />
<circle cx="250" cy="250" r="150" fill="red" />
<circle cx="250" cy="250" r="100" fill="blue" />
<polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
</svg>
Эллипс рисуется как круг, только указываются два значения радиуса и центральная точка. Атрибуты cx и cy помещают центральную точку на указанном расстоянии от начала SVG-координат, значения rx и ry определяют радиус сторон фигуры.
<svg viewPort="0 0 120 120">
<ellipse cx="60" cy="60" rx="60" ry="30" />
</svg>
Добавим ссылку на эллипс и определим свойство CSS
<style>
svg .magic:hover { fill: red; }
</style>
<svg viewPort="0 0 90 90">
<a xlink:href="http://webmaster.alexanderklimov.ru/">
<ellipse cx="60" cy="60" rx="50" ry="25" class="magic" />
</a>
</svg>
При наведении мыши эллипс станет красным, а по щелчку посетитель перейдёт по указанному адресу.
У прямоугольника больше атрибутов, чем у круга. Но в целом понятно - координаты первой точки в верхнем левом углу, ширина и высота.
Атрибуты width и height устанавливают размер прямоугольника, если не указаны единицы измерения, то по умолчанию это будут пиксели. Можно указать разные единицы измерения у ширины и высоты. Например, высоту задать в сантиметрах, а ширину в дюймах. Также можно использовать проценты от общих размеров холста.
Атрибут fill — внутренний цвет фигуры. Если атрибут не указан, по умолчанию цвет будет чёрным.
Координаты x и y разместят фигуру вдоль соответствующей оси согласно размерам, установленным элементом.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<rect x="20" y="20" width="40" height="40"/>
</svg>
Поддерживает обводку.
stroke="tomato" stroke-width="5"
Можно закруглить углы через атрибуты rx и ry.
<rect
x="20"
y="20"
width="40" height="40"
stroke="tomato"
stroke-width="5"
rx="5"
ry="5" />
Можно указать разные значения для rx и ry.
Если нужна фигура посложнее чем круг или прямоугольник, то на помощь придёт polygon. Кстати, в SVG нет таких готовых фигур, как звезда или шестиугольник, которые вы могли видеть в векторных редакторах. На самом деле они используют многоугольник с нужными параметрами.
Нарисуем треугольник. В атрибуте points нужно указать координаты точек - вершин для треугольника. Пары значений координат для каждой точки разделяются запятой. Порядок нанесения точек не важен. Также не нужно соединять первую и последнюю точку, это происходит автоматически.
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 0, 50 50, 0 50"/>
</svg>
Пример для равностороннего треугольника.
Если точек будет больше трёх, то можно легко ошибиться и создать совсем не такую фигуру, которую ожидали.
Существуют известные фигуры, код которых можно просто скопировать.
Специальный SVG-тег g позволяет группировать и управлять связанными элементами. Создадим две фигуры с одинаковыми свойствами.
<svg viewBox="0 0 400 160">
<g fill="#33E" stroke="#000" stroke-width="10px">
<circle cx="88" cy="80" r="62"/>
<rect x="246" y="17" width="123" height="123"/>
</g>
</svg>
Можно использовать идентификатор, а свойства вынести отдельно.
<svg viewBox="0 0 400 163">
<style type="text/css">
#svg-container {
fill: hsl(45,80%,80%);
stroke: rgba(0,0,0,0.3);
stroke-width: 10px;
}
</style>
<g id="svg-container">
<circle cx="88" cy="80" r="62"/>
<rect x="246" y="17" width="123" height="123"/>
</g>
</svg>
CodePen - SVG regular polygons - сборник различных многоугольников.
Вернуться в раздел SVG