Styling Škálovateľná vektorová grafika (SVG) s CSS

Dnes budeme pokračovať v diskusii o škálovateľnej vektorovej grafike (SVG) a ako sme uviedli v našom predchádzajúcom príspevku, jednou z výhod použitia SVG je to, že môže byť štylizovaný s CSS.

SVG Styling Vlastnosti

Styling SVG v podstate pracuje rovnako ako v bežných HTML prvkoch, v skutočnosti zdieľajú aj niektoré spoločné vlastnosti. Existujú však aj iné vlastnosti, ktoré sú určené špeciálne pre objekt SVG, ktoré majú vlastnú špecifikáciu okrem CSS.

Napríklad, v bežnom prvku HTML môžeme pridať farbu pozadia buď s farba pozadia alebo pozadie Vlastnosť CSS. V SVG je to trochu iné; farba pozadia je zadaná pomocou vyplniť nehnuteľnosť namiesto toho. Taktiež je určená hranica prvku s mŕtvica majetok a nie je s hraničné ako sme to urobili v bežnom HTML, môžete tu vidieť celý zoznam.

Ak pracujete s vektorovým editorom ako je Adobe Illustrator pomerne dlho, môžete rýchlo uhádnuť, že mechanizmus pomenovania vlastníctva v SVG pochádza z editora.

Implementácia štýlu SVG

Môžeme použiť jeden z nasledujúcich spôsobov, ako štýl SVG prvku;

Atribúty prezentácie

Ak ste videli všetky zoznamy vlastností SVG, môžu byť všetky pridané priamo na prvok, aby zmenili prezentáciu prvku. Nasledujúci príklad ukazuje, ako môžeme pridať vyplniť a mŕtvica nehnuteľnosť priamo na rect element;

Obdĺžnik sa bude javiť ako obrázok nižšie;

Inline štýl listu

Môžeme tiež pridať štýl s štýl atribútov. V nasledujúcom príklade budeme tiež pridávať vyplniť a mŕtvica na rect, ale tentokrát ju pridáme do štýl a otočte ho pomocou CSS3 premeniť majetok, ako je tomu tak;.

Obdĺžnik bude mať rovnaký výsledok, iba to, že sa teraz otáča;

Interný štýl štýlu

Vložiť štýl SVG do priečinka štýl element je tiež možný a nie je iný, ako sme to urobili v bežnom HTML. Tento príklad nižšie ukazuje, ako pridáme interné štýly, ktoré ovplyvňujú prvky SVG .html dokument.

Avšak SVG je jazyk založený na jazyku XML, takže keď sa chystáme pridať inline štýl do a .svg dokument, musíme uviesť vyhlásenie o štýloch CDATA, nasledovne;

CDATA tu je potrebné, pretože CSS môže mať > znak, ktorý bude v rozpore s parsermi XML. Použitím CDATA sa odporúča pre vkladanie štýlu do SVG, aj keď konfliktný znak nie je uvedený v štýle štýlov.

Externý štýl listu

Externý štýl štýlu pracuje rovnako aj pre prvky SVG .html dokument.

Opäť v roku 2009 .svg dokument, musíme odkázať externý štýl štýlu ako xml-stylesheet, ako.

Zoskupovanie prvkov

Prvky SVG môžu byť zoskupené pomocou element. Zoskupovacie prvky nám umožnia zdieľať spoločné štýly so všetkými prvkami v skupine, tu je príklad;

Obdĺžnik aj kruh budú mať rovnaký výsledok.

Konečná myšlienka

Prešli sme všetkými podstatnými záležitosťami, pokiaľ ide o styling SVG s CSS, a to je len jedna z výhod poskytovania grafiky pomocou SVG. V ďalšom príspevku sa budeme zaoberať iným ďalším, takže zostaňte naladení.

• Zobraziť demo
• Stiahnuť zdroj