SVG контур

Для создания контура используется элемент <path>.

В качестве данных контура используются следующие команды:

  • M = переместить указатель
  • L = нарисовать линию
  • H = нарисовать горизонтальную линию
  • V = нарисовать вертикальную линию
  • C = нарисовать кубическую кривую Безье с двумя контрольными точками
  • S = нарисовать сглаженную кубическую кривую Безье с одной контрольной точкой
  • Q = нарисовать квадратичную кривую Безье с одной контрольной точкой
  • T = нарисовать сглаженную квадратичную кривую Безье. Контрольной точкой будет отражение контрольной точки предыдущей команды.
  • A = нарисовать эллиптическую кривую
  • Z = закрыть контур

Примечание: Все вышеприведенные команды имеют вариант записи в нижнем регистре. Если команда записана большими буквами, то позиционирование будет абсолютным. Если маленькими буквами, то позиционирование будет относительным.

Пример №1

В следующем примере определяется контур, который начинается в координатах (150,0), затем проводится линия в координаты (75,200), затем проводится линия в координаты (225,200) и, наконец, контур закрывается в начальных координатах (150,0):

Ваш браузер не поддерживает HTML тег SVG.

SVG код:


<svg height="210" width="400">
   <path d="M150 0 L75 200 L225 200 Z" />
</svg> 

Пример №2

Кривые Безье используются для моделирования плавных кривых линий, масштаб которых можно бесконечно увеличивать или уменьшать. Обычно, выбирается две конечных точных точки и одну или две контрольных. Кривую Безье с одной контрольной точкой называют квадратичной кривой Безье, а с двумя контрольными точками — кубической.

В следующем примере создается кубическая кривая Безье. Здесь A и C — соответственно начальная и конечная точки, B — контрольная точка:

A B C Ваш браузер не поддерживает HTML тег SVG.

SVG код:


<svg height="400" width="450">
   <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
   stroke-width="3" fill="none" />
   <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
   stroke-width="3" fill="none" />
   <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
   fill="none" />
   <path d="M 100 350 q 150 -300 300 0" stroke="blue"
   stroke-width="5" fill="none" />
   <!-- Пометим соответствующие точки -->
   <g stroke="black" stroke-width="3" fill="black">
     <circle id="pointA" cx="100" cy="350" r="3" />
     <circle id="pointB" cx="250" cy="50" r="3" />
     <circle id="pointC" cx="400" cy="350" r="3" />
   </g>
   <!-- Поставим метки точек -->
   <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
   text-anchor="middle">
     <text x="100" y="350" dx="-30">A</text>
     <text x="250" y="50" dy="-10">B</text>
     <text x="400" y="350" dx="30">C</text>
   </g>
</svg> 

Сложно? ДА!!!! Именно из-за сложности при рисовании контуров и рекомендуется использовать специальный SVG редактор для создания сложной графики.