Styling Scalable Vector Graphic (SVG) med CSS

Idag ska vi fortsätta vår diskussion om Scalable Vector Graphic (SVG), och som vi har påpekat i vårt tidigare inlägg är en av fördelarna med att använda SVG att den kan formas med CSS.

SVG Styling Egenskaper

Styling SVG fungerar i princip på samma sätt som i vanliga HTML-element, de delar faktiskt också några vanliga egenskaper. Det finns dock andra egenskaper som är specifikt avsedda för SVG-objekt som har sin egen specifikation förutom CSS.

Till exempel, I vanligt HTML-element kan vi lägga till bakgrundsfärg antingen med bakgrundsfärg eller bakgrund CSS-egenskapen. I SVG är det lite annorlunda; bakgrundsfärgen specificeras med fylla egendom istället. Elementets gräns anges också med stroke egendom och är inte med gräns Som vi gjorde i vanlig HTML, kan du se hela listan här.

Om du har arbetat med vektorredigerare som Adobe Illustrator ganska länge kan du gissa snabbt att egenskapsnamnmekanismen i SVG härstammar från redigeraren.

SVG Style Implementation

Vi kan använda ett av följande sätt att utforma SVG-element;

Presentation Egenskaper

Om du har sett alla SVG egenskaper listor, kan alla läggas direkt på elementet för att ändra elementets presentation. Följande exempel visar hur vi kan lägga till fylla och stroke egendom direkt på en rect element;

Rektangeln kommer att visa sig som skärmdumpen nedan;

Inline Style Sheet

Vi kan också lägga till stil med stil attribut. I följande exempel lägger vi till fylla och stroke till rect, men den här gången lägger vi till den inom stil och rotera den med CSS3 omvandla egendom, som så;.

Rektangeln kommer att vända i samma resultat, bara att det nu också roteras;

Internt stilark

Bädda in SVG-stilen inom stil element är också möjligt och skiljer sig inte från hur vi gjorde det på vanlig HTML. I det här exemplet nedan visas hur vi lägger till interna format för att påverka SVG-element i .html dokumentera.

SVG är emellertid ett XML-baserat språk, så när vi ska lägga till inline stilark i en .svg dokument, vi måste sätta in formatdeklarationen inuti cdata, som följer;

De cdata här krävs, eftersom CSS kan ha > tecken som kommer att strida mot XML-parsers. Använder sig av cdata rekommenderas starkt för inbäddningsstil i SVG, även om det motstridiga tecknet inte anges i stilarket.

Externt stilark

Det externa stilarket fungerar också på samma sätt för SVG-element i .html dokumentera.

Återigen i .svg dokument, vi behöver referera det externa stilarket som en xml-formatmall, såhär.

Grupperingselement

SVG-element kan grupperas med element. Grupperingselement gör att vi kan dela gemensamma stilar till alla element i gruppen, här är ett exempel;

Både rektangeln och cirkeln kommer att ha samma resultat.

Slutlig tanke

Vi har gått igenom alla viktiga frågor om styling SVG med CSS och det här är bara en av fördelarna med att fungera grafiskt med SVG. I nästa inlägg tar vi en titt på en annan, så håll dig stillad.

• Visa demo
• Hämta källa