Стилинг Сцалабле Вецтор Грапхиц (СВГ) са ЦСС-ом

Данас ћемо наставити нашу дискусију о Сцалабле Вецтор Грапхиц (СВГ), и као што смо истакли у претходном посту, једна од предности кориштења СВГ-а је да се може стилизирати помоћу ЦСС-а.

СВГ Стилинг Пропертиес

Стилинг СВГ у основи ради на исти начин као и код уобичајених ХТМЛ елемената, они заправо дијеле и неке заједничке особине. Међутим, постоје и друге особине које су намењене посебно за СВГ објекат који има своје спецификације осим ЦСС-а.

На пример, у обичном ХТМЛ елементу можемо додати боју позадине или са боја позадине или позадини ЦСС својство. У СВГ-у је мало другачије; боја позадине је одређена са филл уместо тога. Такође, граница елемента је специфицирана са удар имовине и није са граница као што смо радили у обичном ХТМЛ-у, можете погледати комплетну листу овдје.

Ако сте дуго радили са векторским уређивачем као што је Адобе Иллустратор, можете брзо да погодите да је механизам за именовање својстава у СВГ-у настао из уредника.

Имплементација СВГ стила

Можемо користити један од следећих начина за стил СВГ елемента;

Атрибути презентације

Ако сте видели сву листу СВГ својстава, све се могу додати директно на елемент да би се променила презентација елемента. Следећи пример показује како можемо додати филл и удар имовине директно на а рецт елемент;

Правокутник ће се показати као слика испод;

Инлине Стиле Схеет

Можемо додати и стил са стил аттрибуте. У следећем примеру такође ћемо додати филл и удар до рецт, али овај пут смо је додали у стил и ротирајте га помоћу ЦСС3 трансформисати као што је то;.

Правоугаоник ће се претворити у исти резултат, само што је сада и ротиран;

Интернал Стиле Схеет

Уградите СВГ стил унутар стил елемент је такође могућ и не разликује се од начина на који смо то радили на обичном ХТМЛ-у. Овај пример испод показује како додајемо интерне стилове како бисмо утицали на СВГ елементе у .хтмл доцумент.

Међутим, СВГ је језик заснован на КСМЛ-у, тако да када ћемо додати инлине стилски лист у а .свг документ, морамо да ставимо декларацију стилова унутра цдата, као што следи;

Тхе цдата овде је потребно, јер ЦСС може имати > који ће бити у конфликту са КСМЛ парсерима. Користећи цдата препоручује се за уграђивање стила у СВГ-у, чак и ако конфликтни знак није наведен у стилу.

Ектернал Стиле Схеет

Спољашња табела стилова такође функционише на исти начин за СВГ елементе у .хтмл доцумент.

Агаин ин .свг документ, требамо упутити екстерни стилски лист као кмл-стилесхеет, овако.

Груписање елемената

СВГ елементи могу бити груписани са елемент. Елементи групирања ће нам омогућити да дијелимо заједничке стилове са свим елементима у групи, ево примера;

И правоугаоник и круг ће имати исти резултат.

Финал Тхоугхт

Прошли смо кроз све битне ствари у обликовању СВГ-а са ЦСС-ом и ово је само једна од предности сервирања графике са СВГ-ом. У следећем посту ћемо погледати још једну, па останите у току.

• Виев Демо
• Довнлоад Соурце