Основи SVG: Групи

21.04.2020

193

Від автора: У даній статті ми розглянемо основи SVG: групи. Групи або тег в SVG за значенням схоже

‘у в HTML у тому плані, що це контейнер для управління внутрішніми SVG елементами. Тим не менш, в окремих питаннях вони суттєво відрізняються, і ці відмінності дуже важливо зрозуміти.

Так само як і з

у групах стилі успадковуються дочірніми елементами:

На виході отримаємо:

Всі трансформації з групами також успадковуються дочірніми елементами.

Але, на відміну від

, SVG групи не можна позиціонувати. Їх можна перемістити за допомогою властивості transform, але так як у груп немає атрибутів X і Y, позиціонувати в SVG документі їх не можна.

І знову як з

‘ами, у груп є атрибут id (і майже класи), використовувані для стилізації чи написання скриптів:

#svg-container {
fill: hsl(45,80%,80%);
stroke: rgba(0,0,0,0.3);
stroke-width: 10px;
}

На виході отримуємо:

(І в точності як при CSS спадкування, всі правила, що застосовуються безпосередньо до елементів, переписують стилі від батьківських елементів при конфліктах)

І, нарешті, на відміну від

елементи є два дочірніх тега і , в яких прописуються метадані і семантичний опис.

Adobe Illustrator і схожі візуальні редактори зазвичай «перевантажують» SVG-файл при збереженні тонною непотрібних груп (пов’язаних, як правило, з різними верствами). Щоб позбавитися від зайвих груп, зведіть шари, перш ніж зберігати файл; або ж під час минификации з допомогою програми SVGoMG можна видалити зайві теги.