Styling Scalable Vector Graphic (SVG) s CSS

Dnes budeme pokračovat v diskusi o Scalable Vector Graphic (SVG)..

Vlastnosti stylingu SVG

Styling SVG funguje v podstatě stejně jako u běžných HTML elementů, ve skutečnosti sdílí také některé společné vlastnosti. Existují však i jiné vlastnosti, které jsou určeny speciálně pro objekt SVG, které mají kromě CSS vlastní specifikaci.

Například, v běžném HTML elementu můžeme přidat barvu pozadí buď pomocí barva pozadí nebo Pozadí Vlastnost CSS. V SVG je to trochu jiné; barva pozadí je zadána pomocí vyplnit místo toho. Také ohraničení prvku je zadáno pomocí mrtvice a není s okraj stejně jako v běžném HTML, zde můžete vidět kompletní seznam.

Pokud pracujete s vektorovým editorem jako je Adobe Illustrator poměrně dlouho, můžete rychle odhadnout, že mechanismus pojmenování vlastností v SVG pochází z editoru.

Implementace SVG stylu

Pro styl elementu SVG můžeme použít jeden z následujících způsobů;

Prezentační atributy

Pokud jste viděli všechny seznamy vlastností SVG, mohou být všechny přidány přímo na prvek, aby se změnila prezentace prvku. Následující příklad ukazuje, jak můžeme přidat vyplnit a mrtvice přímo na pozemku rekt živel;

Obdélník bude vypadat jako snímek níže;

List vloženého stylu

Můžeme také přidat styl styl atribut. V následujícím příkladu také přidáme vyplnit a mrtvice na rekt, ale tentokrát ji přidáme do styl a otočte s CSS3 přeměnit majetek, jako je;.

Obdélník se změní ve stejný výsledek, pouze to, že je nyní také otočeno;

List interního stylu

Vložte styl SVG do styl element je také možný a neliší se od toho, jak jsme to dělali na běžném HTML. Níže uvedený příklad ukazuje, jak přidáváme interní styly pro ovlivnění prvků SVG v .html dokument.

SVG je však jazyk založený na XML, takže když se chystáme přidat inline styl v a .svg dokumentu, musíme uvést deklaraci stylů dovnitř cdata, jak následuje;

cdata zde je nutné, protože CSS může mít > znak, který bude v konfliktu s analyzátory XML. Použitím cdata je velmi doporučeno pro vkládání stylu do SVG, i když konfliktní znak není uveden ve stylu.

List externího stylu

Externí šablona stylů funguje stejně pro elementy SVG .html dokument.

Opět v .svg dokument, musíme odkazovat na externí seznam stylů jako xml-stylesheet, jako tak.

Seskupování prvků

Prvky SVG mohou být seskupeny s živel. Seskupení prvků nám umožní sdílet společné styly se všemi prvky ve skupině, zde je příklad;

Obdélník i kruh budou mít stejný výsledek.

Závěrečná myšlenka

Prošli jsme všemi důležitými otázkami týkajícími se stylingu SVG pomocí CSS a to je jen jedna z výhod, které nabízí grafika s SVG. V dalším příspěvku se podíváme do dalšího, takže zůstaňte naladěni.

• Zobrazit ukázku
• Stáhněte si zdroj