Méretezhető vektorgrafika (SVG) formázása a CSS segítségével

Ma folytatjuk a Scalable Vector Graphic (SVG) témakörben folytatott megbeszélést, és amint azt az előző hozzászólásunkban rámutattuk, az SVG használatának egyik előnye az, hogy a CSS-sel stílusos lehet..

SVG Styling Properties

Az SVG formázása alapvetően ugyanúgy működik, mint a szokásos HTML elemeknél, sőt néhány közös tulajdonságot is megosztottak. Vannak azonban más tulajdonságok, amelyek kifejezetten az SVG objektumhoz vannak kifejlesztve, amelyek saját specifikációval rendelkeznek a CSS-n kívül.

Például, a rendszeres HTML elemben háttérszínt is adhatunk hozzá háttérszín vagy háttér CSS tulajdonság. Az SVG-ben ez egy kicsit más; a háttér színe a tölt tulajdonság helyett. Az elem határát is megadja ütés tulajdonjog és nem az határ mint a szokásos HTML-ben, itt látható a teljes lista.

Ha elég hosszú ideig dolgozik az olyan vektorszerkesztővel, mint az Adobe Illustrator, akkor gyorsan kitalálhatja, hogy az SVG tulajdonságnevezési mechanizmusa a szerkesztőből származik.

SVG stílus végrehajtása

Az SVG-elem stílusához az alábbi módszerek egyikét használhatjuk:

Bemutató attribútumok

Ha látta az összes SVG tulajdonságlistát, mindegyik közvetlenül hozzáadható az elemhez, hogy megváltoztassa az elem megjelenítését. A következő példa bemutatja, hogyan tudunk hozzáadni tölt és ütés tulajdon közvetlenül a len elem;

A téglalap olyan lesz, mint az alábbi képernyőkép;

Inline stíluslap

Stílust is hozzáadhatunk a stílus tulajdonság. A következő példában hozzáadunk tölt és ütés hoz len, de ezúttal a stílus és forgassa CSS3-mal átalakít vagyon;.

A téglalap ugyanarra az eredményre fog fordulni, csak azt, hogy most is elfordul;

Belső stíluslap

Az SVG stílus beágyazása a stílus az elem is lehetséges, és nem különbözik attól, hogyan csináltuk a szokásos HTML-en. Az alábbi példa azt mutatja be, hogyan adunk hozzá belső stílusokat az SVG elemekre .html dokumentum.

Az SVG azonban XML-alapú nyelv, így amikor egy inline stíluslapot adunk hozzá a .svg dokumentumot kell beillesztenünk cdata, alábbiak szerint;

A cdata itt van szükség, mivel a CSS lehet > karakter, amely ütközik az XML elemzőkkel. használata cdata erősen ajánlott a stílus SVG-be történő beágyazására, még akkor is, ha az ütköző karakter nem szerepel a stíluslapon.

Külső stíluslap

A külső stíluslap ugyanúgy működik az SVG-elemeknél is .html dokumentum.

Ismét .svg dokumentumot, a külső stíluslapot mint egy xml-stylesheet, úgy tetszik.

Elemek csoportosítása

Az SVG elemek csoportosíthatók a elem. A csoportosító elemek lehetővé teszik számunkra, hogy közös stílusokat adjunk meg a csoport összes eleméhez, itt egy példa;

Mind a téglalap, mind a kör ugyanolyan eredményt kap.

Végső gondolat

Sikerült végigvinni az összes lényeges kérdést az SVG-vel a CSS-sel, és ez csak az egyik előnye a grafika SVG-vel való kiszolgálásának. A következő hozzászólásban megvizsgáljuk még egy újabbat, így maradjon hangolva.

• Demó megtekintése
• Letöltés forrása