В этой серии мы узнали, что такое SVG , почему вы должны их учитывать и как вы можете встраивать их в свои веб-страницы . Мы также обсудили основные элементы рисования, но вскоре вы выйдете за рамки простых линий, прямоугольников и эллипсов.
Пути SVG намного более продвинуты. Можно утверждать, что это единственный элемент, который вам когда-либо нужен, потому что он может нарисовать любую форму, какую пожелаете. Однако есть один недостаток, который лучше всего иллюстрируется на примере:
<path d="M500,500 L500,20 A480,480 0 0,1 968,607 z" />
Что это обозначает? Это похоже на бессмысленный мусор, но за этим стоит логика.
Для элемента path требуется один атрибут ‘d’, представляющий собой строку, содержащую список закодированных инструкций рисования. Это не так сложно, как синтаксис регулярных выражений, но все равно легко запутаться.
Строка чертежа формируется с использованием серии команд, обозначенных заглавной или строчной буквой. Затем следует ноль или более аргументов, которые применяются к этой команде. Например, следующий путь перемещает перо в начальную точку на 500 500 без рисования линии:
<path d="M500,500" />
Точно так же строчная буква «m» перемещает перо относительно его текущего местоположения, например, на 50 единиц влево и на 100 единиц вверх (помните, что окна просмотра SVG обычно начинаются с 0,0 в верхнем левом углу):
<path d="m50,-100" />
Рисование линий аналогично; «L» рисует линию для абсолютных координат, а «l» рисует линию относительно текущего местоположения. Следующие пути идентичны:
<path d="M500,500 L100,600" />
<path d="M500,500 l-400,100" />
‘H’ и ‘h’ рисуют горизонтальные линии в абсолютном или относительном положении x соответственно, например
<path d="M500,500 H800" />
<path d="M500,500 h300" />
Бонусные баллы, если вы можете догадаться, что делают «V» и «V» …
<path d="M500,500 V400" />
<path d="M500,500 v-100" />
Наконец, ‘Z’ или ‘z’ закрывают путь, рисуя линию от текущей точки до начальной точки. Обычно, ‘Z’ будет последней командой в вашей строке, хотя возможно создавать строки с несколькими подпутями, например
<path d="M500,500 L500,200 L800,500 z M400,600 L400,900 L100,600 z" />
производит:
Теперь у вас есть путь, элемент может быть стилизован с помощью CSS или вы можете добавить обводку, штрих-ширину, заливку и другие атрибуты по мере необходимости.
Если вы думаете, что это легко, возможно, лучше отдохнуть и подготовиться. В моей следующей статье о SVG мы обсудим кубические кривые Безье, квадратичные кривые Безье и эллиптические дуги…