Svg шлях

- самий універсальний елемент. З його допомогою можна намалювати будь-яку просту фігуру svg. За своєю універсальністю він обходить за рахунок того що може малювати криві. Для визначення шляху потрібен один атрибут d в якому вказуються координати точок і команди визначають як малювати.

П'ять команд для малювання ліній в SVG

Для початку визначимо початок шляху. Для цього скористаємося командою M. Ця команда не малює а переміщує курсор в точку із заданими координатами. Є два варіанти цієї команди. М заголовна вказує що координати абсолютні, а m вказує на відносні координати (точка відліку - попередня точка шляху). Вобще такий порядок визначення працює для всіх команд шляху. Код нижче перемістить курсор в точку з координатами 10 10

Для рісоварія прямих ліній є три команди. Довільна лінія малюється командою L або l. Якщо потрібна горизонтальна лінія використовуємо команду H або h. У цей випадку вказується тільки одна координата x. Координата по y залишається такойже як у попередньої точки. Також є команда для вертикальних ліній V або v. Тут вказується координата y. Коли вказуєте координати не забувайте що точка відліку розташована у верхньому лівому кутку. При русі вправо збільшується координата x. При русі вниз збільшується координата y. Координати можуть приймати негативні значення. Приклад нижче намалює квадрат зі стороною 80.

Розберемо шлях по точкам.

  1. Спочатку поставили курсор в точку 10 10 (команда M10 10)
  2. Малюємо горизонтальну лінію 80px (h80). Так як h в нижньому регістрі то точкою відліку були координати попередньої точки. Таку ж лінію можна намалювати командою H90.
  3. Далі малюємо вертикальну лінію на 80px вниз (v80). Теж саме можна зробити командою V90.
  4. Ми знаходимося в нижньому правому куті. Команда h-80 малює лінію 80px вліво.
  5. Останню лінію я намалював за допомогою команди L, хоча можна було скористатися ще однією V або командою Z.

Z - закриває шлях пов'язуючи останню крапку з першої. Такий же квадрат можна намалювати так

криві SVG

вміє три види кривих. Кубічна і квадратна криві Безьє і дуга.

Команда A малює частину еліпса (дугу). Також як для еліпса, для дуги потрібно вказати два радіусу rx і ry. Далі вказуємо на скільки градусів повернена вісь X еліпса. Наступні два значення визначають яку частину еліпса показувати. Останніми йдуть координати кінця дуги. На координатах і радіусах зупинятися не будемо. Тут все зрозуміло. Розберемося з кутом повороту. У случаес з графікою краще один раз побачити. Код нижче малює дві дуги. Друга повернена на 45 градусів.

Дуга це частина шляху. Щоб отримати дугу потрібно намалювати еліпс через дві контрольні точки. Проблема в тому, що при заданих радіусах через дві точки можна намалювати чотири дуги. Як зробити так щоб була намальована та, що нам потрібна? Для цього є два значення - прапора. Перший визначає чи повинна дуга бути більше 180 градусів (1 - більше 180, 0 - менше 180). Другий параметр визначає напрямок руху дуги. Через дві точки ми можемо провести дугу за годинниковою (значення 1) і проти годинникової (значення 0). Щоб було зрозуміліше дивимося приклад нижче. Перша і четверта дуга це частини одного еліпса, втораяя і третя частина такогоже еліпса але розташованого нижче. Припустимо нам потрібна третя дуга. Дуга більше 180 градусів значить перший параметр 1. Рух по дузі в негативну сторону, значить другий параметр 0.

криві Безьє

Для кубічної кривої Безьє Потрібно поставити три набори координат. Перші йдуть координати контрольної точки початку лінії, другими - координати контрольної точки кінця лінії і останніми координати кінцевої точки лінії. Якщо ви користувалися який-небудь програмою для svg графіки ви, напевно, пам'ятаєте, що якщо намалювати лінію і клікнути по кінцевій точці, то з'явитися лінія з точкою на кінці. Якщо тягнути за цю точку в різні боки то кривизна вихідної лінії буде змінюватися. Це і є контрольна точка. Контрольні точки визначають нахил лінії. Функція Безьє веде плавну лінію від нахилу на початку до нахилу в кінці. Для малювання таких ліній використовують команду C x1 y1, x2 y2, x y

Щоб об'єднати криві Безьє використовують команду S x2 y2, x y. У цьому випадку значення першої контрольної точки приймається дзеркальним значенням другий конрольной точки попередньої лінії.

Якщо S не слід за іншою командою S або C, то передбачається що обидві контрольні точки однакові.

У SVG доступний ще один тип кривої Безьє. Квадратична крива простіше ніж кубічна. Потрібна тільки одна контрольна точка, яка визначає нахил кривої в початковій і кінцевій точці. Вимальовується за допомогою команди
Q x1 y1, x y
Також як для кубічної функції є можливість об'єднує кілька квадратичних за допомогою команди
T x y
Функція працює тільки якщо перед нею була T або Q функція. В іншому випадку буде намальована пряма.

Обидві криві дають схожі результати. Кубічні дозволяють більш точно налаштувати вигляд кривої.

Схожі статті