Фигуры

<line>
<polyline>
<circle>
<ellipse>
<rect>
<polygon>

<line> - Линия

Нарисовать простую прямую линию просто. Указываем координаты двух точек, и между ними будет проведена линия.

Для рисования одной линии используется тег line. Значения атрибутов x1 и y1 устанавливают координаты начала линии, а значения x2 и y2 — определяют конец линии.


<svg  width="900" height="80">  
<line x1="0" y1="0" x2="200" y2="70" stroke-width="1" stroke="rgb(0,0,0)"/>  
</svg>  

Обязательно указывайте атрибут stroke-width, иначе линия будет невидимой.

<polyline> - Много линий

Для рисования нескольких линий используется тег 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> - Круг

Элемент <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>
Captain America's Shield

<ellipse> - Эллипс

Эллипс рисуется как круг, только указываются два значения радиуса и центральная точка. Атрибуты 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>

При наведении мыши эллипс станет красным, а по щелчку посетитель перейдет по указанному адресу.

<rect> - Прямоугольники

У прямоугольника больше атрибутов, чем у круга. Но в целом понятно - координаты первой точки в верхнем левом углу, ширина и высота.

Атрибуты 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> - Многоугольник

Если нужна фигура посложнее чем круг или прямоугольник, то на помощь придёт 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

Реклама