SVG-path • Про CSS

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

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

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

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

Пример №1

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

SVG код:

Пример №2

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

SVG path element часть 1

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

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

SVG код:

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

SVG текст Вверх SVG ломаная линия

Оригинал: http://tympanus.net/codrops/2014/12/15/elastic-svg-elements/

Перевод: Влад Мержевич

Демонстрация

Скачать исходники

Сегодня мы хотели бы поделиться некоторыми мыслями по добавлению гибкости к элементам. Идея в том, чтобы интегрировать SVG элемент в компонент, а затем оживить переход одной кривой в другую с помощью анимации. Использование SVG для таких вещей как меню, кнопки и другие элементы делает их более интересными, а взаимодействие с ними естественным и органичным. Конечно, важно сохранить в них изящество без чрезмерной упругости. Приятно то, что мы можем дать более «реалистичную» интерактивную обратную связь с пользователем.

SVG элементы: rect, circle, ellipse, line, polyline, polygon, path

Особую выгоду от такого эффекта можно извлечь при взаимодействии с сенсорным экраном. Опираясь на эту идею мы создали несколько впечатляющих примеров, в которых анимированное изменение формы имеет смысл.

Для анимации SVG мы используем Snap.svg — превосходную библиотеку JavaScript для современных браузеров.

Иконки, которые применяются в некоторых демонстрациях, взяты из одного набора иконок  Font Awesome от Дэйва Ганди.

Для демонстрации перетаскивания элементов мы используем  Dragabilly  от Дэвида ДеСандро.

Пожалуйста, обратите внимание, что всё это является экспериментальным и демонстрации были проверены только в последних версиях современных браузеров.

Пример того, как мы используем SVG в компонентах (боковое меню в данном случае), следующий:

SVG вставляется после вложенного меню и мы задействуем два атрибута data для хранения анимируемых в дальнейшем кривых, в зависимости от того, открыто или закрыто меню.

SVG добавляется в меню абсолютно, при этом должно быть достаточно пустого пространства по бокам чтобы мы видели движение гибкой линии без её обрезания. Обратите внимание, что SVG занимает ширину и высоту 100% и не сохраняет исходные пропорции. Это важно для некоторых форм, у которых, возможно, вы захотите сохранить заданные пропорции и сделать растяжение только в одном направлении. Для этого примера мы установили фиксированную ширину для обёртки формы.

Через Snap.svg мы затем можем сделать переход одной формы в другую.

С правильно заданной функцией времени и уместным временем анимации получим упругое естественное движение. Но варианты настолько изменчивы и зависят от используемого контекста, что возможности просто безграничны.

Надеемся, вам понравились эти маленькие эффекты и вы нашли их вдохновляющими!

— более сложный вариант линии. С его помощью можно нарисовать , , , и , пруфлинк.

В отличие от , фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.

Пример фигуры с :

Точки фигуры задаются в атрибуте . В значении содержатся команды, управляющие направлением и видом линий. Координаты и можно разделять запятой или пробелом, но запятая наглядней.

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

Примеры ниже демонстрируют разницу между абсолютными и относительными координатами. Различие состоит во второй строке: vs .

Команды в нижнем регистре ( и ) указывают отсчитывать координаты не от верхнего левого угла полотна, а от текущей точки (пример справа):

Команды:

M, m

moveto, обозначает начало новой линии — точку, с которой мы начинаем рисовать.

Параметры: .

Команд в строке может быть несколько, каждая из них будет обозначать начало новой линии:

Z, z

closepath — замкнуть фигуру, при этом рисуется линия от текущей точки до начальной. Действие этой команды не зависит от регистра, и сработают одинаково.

Параметры: нет.

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

Вместо последней точки используем и получаем аккуратно замкнутую фигуру:

L, l

lineto — рисование линии.

Параметры: .

Следует отметить, что писать перед каждой точкой не обязательно:

=

Строчки сработают одинаково, но с удобнее, если код предполагается читать.

H, h

horizontal lineto — рисование горизонтальной линии.

Параметры: .

V, v

vertical lineto — рисование вертикальной линии.

Параметры: .

С помощью этих команд очень удобно рисовать прямоугольные фигуры:

Помимо команд для рисования прямых линий, есть несколько команд для рисования кривых.

Синтаксис SVG ↓

Они достаточно интересные, хотя и несколько сложнее для понимания.

Пунктирная линия в примерах (где возможно) показывает, что получается без команды, задающей кривую. Для меня вспомогательная линия сделала несколько понятнее прицип работы этих команд.

C, c

curveto

Параметры:

Абсолютные координаты

Относительные координаты

S, s

smooth curveto

Параметры:

Абсолютные координаты

Относительные координаты

Q, q

quadratic Bézier curveto

Параметры:

Абсолютные координаты

Относительные координаты

T, t

smooth quadratic Bézier curveto

Параметры:

Абсолютные координаты

Относительные координаты

A, a

elliptical arc

Параметры:

Абсолютные координаты

Относительные координаты

Чтобы получить более полное представление о работе этих функций читайте спецификацию.

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.

Добавить комментарий

Закрыть меню