Styling Scalable Vector Graphic (SVG) с CSS
Днес ще продължим дискусията си за Scalable Vector Graphic (SVG) и както отбелязахме в предишния си пост, едно от предимствата на използването на SVG е, че може да бъде оформена с CSS.
SVG Styling Properties
Styling SVG основно работи по същия начин, както при обикновените HTML елементи, те всъщност споделят и някои общи свойства. Има обаче и други свойства, които са предназначени специално за SVG обект, които имат свои собствени спецификации, различни от CSS.
Например, в обикновен HTML елемент можем да добавим цвят на фона или с Цвят на фона или заден план CSS собственост. В SVG е малко по-различно; цветът на фона е зададен с запълни вместо това. Също така, границата на елемента е зададена с удар собственост и не е с граница както правим в обикновения HTML, можете да видите пълния списък тук.
Ако сте работили с векторния редактор като Adobe Illustrator доста дълго, можете да предположите бързо, че механизмът за именуване на свойства в SVG е създаден от редактора.
Реализиране на SVG стил
Можем да използваме един от следните начини за стилизиране на SVG елемента;
Атрибути за представяне
Ако сте видели целия списък със свойства на SVG, всички те могат да бъдат добавени директно към елемента, за да се промени представянето на елемента. Следният пример показва как можем да добавим запълни и удар собственост директно на на правоъгълник елемент;
Правоъгълникът ще се окаже като снимката отдолу;
Инлайн лист със стил
Можем също да добавим стил с стил атрибут. В следващия пример ще добавим запълни и удар към на правоъгълник, но този път го добавяме в стил и го завъртете с CSS3 трансформиране такава;.
Правоъгълникът ще се върти в същия резултат, само че сега той също се завърта;
Вътрешен стилов лист
Вградете SVG стила в стил елемент е възможно и не се различава от начина, по който го направихме с обикновен HTML. Този пример по-долу показва как добавяме вътрешни стилове, за да повлияем на SVG елементите в .HTML документ.
Въпреки това SVG е език, базиран на XML, така че когато се налага да добавим вграден стилов лист в a .SVG документ, трябва да поставим декларацията за стилове вътре CDATA, както следва;
Най- CDATA тук е необходимо, тъй като CSS може да има > знак, който ще бъде в конфликт с XML парсерите. Използвайки CDATA Силно се препоръчва за вграждане на стил в SVG, дори ако конфликтният символ не е даден в таблицата със стилове.
Външен стилов лист
Външната таблица със стилове също работи по същия начин за SVG елементите в .HTML документ.
Отново в .SVG документ, трябва да се отнасяме към външния стилов лист като XML-стилове, така.
Групиране на елементи
SVG елементите могат да бъдат групирани с
И двата правоъгълника и кръгът ще имат същия резултат.
Заключителна мисъл
Преминахме през всички съществени въпроси, свързани със стайлинг на SVG с CSS и това е само едно от предимствата на обслужването на графики с SVG. В следващия пост ще разгледаме още един по-нататък, така че останете на линия.
- Преглед на демо
- Изтеглете Източник
