SVG-фігури і трансформації
Писати SVG досить просто. Використовуються фігури: rect. polygon. circle. ellipse. а також line. polyline і path. Задаємо обрану фігуру, визначаємо її розміри і координати, потім додаємо фон і обведення.
Розміри і координати задаються для різних фігур по-різному, а ось фон і обведення - однакові для всіх:
fill - заливка. Можна задати колір будь-яким способом. Прозорість - none або transparent. Колір за умовчанням - чорний; stroke - колір обведення; stroke-width - товщина обведення, за замовчуванням - 1. Без stroke не працює.
Нижче ви можете побачити приклади простих SVG-фігур і трансформації, які до них можна застосувати.
x. y - координати лівого верхнього кута фігури; width. height - ширина і висота прямокутника.
Закруглені куточки задаються параметрами rx і ry. Якщо заданий тільки один з параметрів, скругление по вертикалі і по горизонталі буде однаковим:
Якщо задані обидва параметри (і вони таки різні), радіус заокруглення буде різним:
У points задаються x, y -коордінати вершин фігури, через пробіл.
polygon замикається сам по собі, останню крапку можна не вказувати.
r - радіус кола; cx. cy - координати центру кола.
rx. ry - горизонтальний і вертикальний радіуси еліпса; cx. cy - координати центру еліпса.
Більш складні фігури можна зробити з поєднання простих:
При цьому стиль фігур можна задати один раз для всієї групи, а не окремо для кожної фігури:
Також можна малювати простими лініями.
x1. y1. x2. y2 - координати початку і кінця лінії.
У points задаються x, y -коордінати точок, кожна точка через пробіл.
Для більш складних ліній і фігур існує тег path. але цю тему варто розглянути окремо.
SVG-фігури можна видозмінювати за допомогою властивості transform.
Можливі значення: translate. scale. rotate. skewX. skewY. matrix.
Можна задавати кілька трансформацій через кому або через пропуск.
translate (tx [ty])
Якщо другий параметр не заданий, він дорівнює 0.