Style graphique vectoriel évolutif (SVG) avec CSS
Aujourd’hui, nous allons poursuivre notre discussion sur SVG (Scalable Vector Graphic) et, comme nous l’avons souligné dans notre précédent article, l’un des avantages de l’utilisation de SVG est qu’il peut être stylisé avec CSS..
Propriétés de style SVG
Le style SVG fonctionne fondamentalement de la même manière que dans les éléments HTML classiques, ils partageaient également certaines propriétés communes. Cependant, il existe d’autres propriétés destinées spécifiquement aux objets SVG qui ont leur propre spécification en dehors de CSS.
Par exemple, dans un élément HTML normal, nous pouvons ajouter une couleur de fond avec Couleur de fond ou Contexte Propriété CSS. En SVG, c'est un peu différent. la couleur de fond est spécifiée avec le remplir propriété à la place. De plus, la bordure de l'élément est spécifiée avec accident vasculaire cérébral propriété et n'est pas avec le frontière comme nous l'avons fait en HTML normal, vous pouvez voir la liste complète ici.
Si vous avez travaillé assez longtemps avec un éditeur de vecteur comme Adobe Illustrator, vous pouvez rapidement deviner que le mécanisme de nommage des propriétés en SVG provient de l'éditeur..
Implémentation de style SVG
Nous pouvons utiliser l’une des méthodes suivantes pour mettre en forme un élément SVG;
Attributs de présentation
Si vous avez vu toute la liste des propriétés SVG, vous pouvez toutes les ajouter directement sur l'élément pour modifier la présentation de l'élément. L'exemple suivant montre comment nous pouvons ajouter remplir et accident vasculaire cérébral propriété directement sur un rect élément;
Le rectangle ressemblera à la capture d'écran ci-dessous;
Feuille de style en ligne
Nous pouvons aussi ajouter du style avec le style attribut. Dans l'exemple suivant, nous ajouterons également remplir et accident vasculaire cérébral au rect, mais cette fois on l'ajoute dans le style et le faire pivoter avec CSS3 transformer la propriété, comme telle;.
Le rectangle tournera dans le même résultat, à la différence qu’il est maintenant également pivoté;
Feuille de style interne
Intégrez le style SVG dans le style L'élément est également possible et ne diffère pas de la façon dont nous l'avons fait avec HTML normal. Cet exemple ci-dessous montre comment nous ajoutons des styles internes pour affecter des éléments SVG dans .html document.
Cependant, SVG est un langage basé sur XML. Ainsi, lorsque nous allons ajouter une feuille de style inline dans un .svg document, nous devons mettre la déclaration de styles à l'intérieur cdata, comme suit;
le cdata ici est nécessaire, puisque CSS peut avoir > caractère qui sera en conflit avec les analyseurs XML. En utilisant cdata est fortement recommandé pour incorporer le style dans SVG, même si le caractère en conflit n'est pas indiqué dans la feuille de style.
Feuille de style externe
La feuille de style externe fonctionne également de la même manière pour les éléments SVG dans .html document.
À nouveau dans .svg document, nous devons référencer la feuille de style externe en tant que xml-stylesheet, ainsi.
Regroupement d'éléments
Les éléments SVG peuvent être regroupés avec le
Le rectangle et le cercle auront le même résultat.
Pensée finale
Nous avons abordé toutes les questions essentielles relatives au style SVG avec CSS et ce n’est qu’un des avantages de servir Graphic avec SVG. Dans le prochain post, nous allons jeter un coup d'œil dans un autre, alors restez à l'écoute.
- Voir la démo
- Source de téléchargement
