Styling Scalable Vector Graphic (SVG) met CSS
Vandaag zullen we onze discussie over Scalable Vector Graphic (SVG) voortzetten, en zoals we in onze vorige post hebben opgemerkt, is een van de voordelen van het gebruik van SVG dat het met CSS kan worden gestileerd.
SVG-stylingeigenschappen
Styling SVG werken in principe op dezelfde manier als in normale HTML-elementen, maar delen in feite ook een aantal gemeenschappelijke eigenschappen. Er zijn echter nog andere eigenschappen die specifiek zijn bedoeld voor SVG-objecten met een eigen specificatie die geen verband houdt met CSS.
Bijvoorbeeld, in een standaard HTML-element kunnen we achtergrondkleur toevoegen met of Achtergrond kleur of achtergrond CSS-eigenschap. In SVG is het een beetje anders; de achtergrondkleur wordt opgegeven met de vullen eigendom in plaats daarvan. Ook wordt de rand van het element opgegeven met beroerte eigendom en is niet met de grens zoals we in gewone HTML deden, kunt u hier de volledige lijst bekijken.
Als u al lang met vectoreditor als Adobe Illustrator werkt, kunt u snel raden dat het mechanisme voor benaming van de eigenschap in SVG afkomstig is van de editor.
Implementatie SVG-stijl
We kunnen een van de volgende manieren gebruiken om een SVG-element te stylen;
Presentatiekenmerken
Als u alle SVG-eigenschappen hebt gezien, kunnen ze allemaal rechtstreeks aan het element worden toegevoegd om de presentatie van het element te wijzigen. Het volgende voorbeeld laat zien hoe we kunnen toevoegen vullen en beroerte eigendom direct op een rect element;
De rechthoek zal lijken op de onderstaande schermafbeelding;
Inline stijlblad
We kunnen ook stijl toevoegen met de stijl attribuut. In het volgende voorbeeld zullen we ook toevoegen vullen en beroerte naar de rect, maar deze keer voegen we het toe binnen de stijl en draai het met CSS3 transformeren eigendom, zoals zo;.
De rechthoek wordt hetzelfde resultaat, alleen dat deze nu ook is geroteerd;
Intern stijlblad
Sluit de SVG-stijl in de stijl element is ook mogelijk en is niet anders dan hoe we het deden op gewone HTML. Dit onderstaande voorbeeld laat zien hoe we interne stijlen toevoegen om SVG-elementen in te beïnvloeden .html document.
SVG is echter een op XML gebaseerde taal, dus wanneer we op het punt staan inline stylesheet toe te voegen in a .svg document, we moeten de stijlverklaring binnen zetten cdata, als volgt;
De cdata hier is vereist, omdat CSS kan hebben > teken dat conflicteert met XML-parsers. Gebruik makend van cdata wordt ten zeerste aanbevolen voor het insluiten van stijl in SVG, zelfs als het conflicterende teken niet in de stijlpagina wordt vermeld.
Extern stijlblad
Het externe stijlblad werkt ook op dezelfde manier voor SVG-elementen in .html document.
Weer binnen .svg document, moeten we het externe stijlblad verwijzen als een xml-stylesheet, zoals zo.
Elementen groeperen
SVG-elementen kunnen worden gegroepeerd met de
Zowel de rechthoek als de cirkel hebben hetzelfde resultaat.
Laatste gedachte
We hebben alle essentiële zaken over het stijlen van SVG met CSS doorlopen en dit is slechts een van de voordelen van het weergeven van afbeeldingen met SVG. In de volgende post zullen we een andere verder bekijken, dus houd ons in de gaten.
- Demo bekijken
- Download de bron
