- лінія
Намалювати просту пряму лінію просто. Вказуємо координати двох точок, і між ними буде проведена лінія.
Для малювання однієї лінії використовується тег line. Значення атрибутів x1 і y1 встановлюють координати початку лінії, а значення x2 і y2 - визначають кінець лінії.
Обов'язково вказуйте атрибут stroke-width. інакше лінія буде невидимою.
- багато ліній
Для малювання декількох ліній використовується тег polyline. який визначає набір з'єднаних відрізків прямої лінії, що в результаті дає, як правило, незамкнуту фігуру (початок і кінець точок якої не пов'язані).
Значення в points визначають положення фігури по осях x і y від початку до кінця фігури і розбиті по парах (x, y) у всьому списку значень. Непарне число точок є помилкою.
Щоб визначити лінію з використанням тега polyline. ми задаємо набір точок. Перша точка зміщена на 0 пікселів вправо і на 40 пікселів вниз. Потім лінія переміщається в точку на 30 пікселів вправо і 0 пікселів вниз від початку координат; так створюється перший відрізок. Наступна точка зміщена на 60 пікселів вправо і 40 пікселів вниз, а остання точка - на 285 пікселів вправо і 40 пікселів вниз. Атрибут style визначає товщину і колір лінії.
Фігура не стає замкнутою автоматично, якщо перша і остання точки не збігаються. Ми можемо застосувати атрибут fill для зафарбовування фігури, але результат буде не зовсім такою, як при закраске замкнутих фігур.
- коло
елемент
Також можна вказати обведення - ширину і колір.
Можна перенести частину коду з SVG в CSS.
Поєднання декількох кіл дозволять нам створити щит Капітана Америки.
Captain America's Shield
- еліпс
Еліпс малюється як коло, тільки вказуються два значення радіусу і центральна точка. Атрибути cx і cy поміщають центральну точку на вказаній відстані від початку SVG-координат, значення rx і ry визначають радіус сторін фігури.
Додамо посилання на еліпс і визначимо властивість CSS
- прямокутники
У прямокутника більше атрибутів, ніж у кола. Але в цілому зрозуміло - координати першої точки в верхньому лівому кутку, ширина і висота.
Атрибути width і height встановлюють розмір прямокутника, якщо не вказані одиниці виміру, то за замовчуванням це будуть пікселі.
Атрибут fill - внутрішній колір фігури. Якщо атрибут не вказаний, за замовчуванням колір буде чорним.
Координати x і y розмістять фігуру вздовж відповідної осі відповідно до розмірів, встановлених елементом.
Можна закруглити кути через атрибути rx і ry.
Можна вказати різні значення для rx і ry.
- багатокутник
Намалюємо трикутник. В атрибуті points потрібно вказати координати точок - вершин для трикутника. Пари значень координат для кожної точки розділяються комою. Порядок нанесення точок не важливий. Також не потрібно з'єднувати першу і останню крапку, це відбувається автоматично.
Приклад для рівностороннього трикутника.
Якщо точок буде більше трьох, то можна легко помилитися і створити зовсім не таку фігуру, яку очікували.
Існують відомі постаті, код яких можна просто скопіювати.
угруповання
Спеціальний SVG-тег g дозволяє групувати і управляти пов'язаними елементами. Створимо дві фігури з однаковими властивостями.
Можна використовувати ідентифікатор, а властивості винести окремо.
додаткове читання
Повернутися в розділ SVG