Styles CSS SVG

Nous pouvons utiliser CSS pour définir les styles des formes SVG. Les styles sont des modifications de l'apparence des formes. Cela peut être la couleur et la largeur du trait, la couleur de remplissage, l'opacité et de nombreuses autres propriétés de la forme.

Il y a6Ces styles peuvent définir les formes dans les images SVG. Chaque sera présenté dans cet article. À la fin de cet article, vous trouverez une liste des propriétés CSS qui peuvent être utilisées avec SVG.

Utilisation des propriétés de style CSS

Est-ce que l'on peut utiliser des propriétés de style spécifiques (par exemple stroke et fill) pour styliser les formes SVG. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

Bien que plusieurs propriétés de style soient disponibles. Cependant, il est recommandé d'utiliser une feuille de style en ligne ou externe, donc je ne vais pas trop parler des propriétés de style ici.

Utilisation de l'attribut style et des propriétés CSS

Cette méthode n'utilise aucune propriété spécifique au style. Au lieu de cela, elle utilise uniquement l'attribut style et y spécifie les propriétés CSS. Si vous avez besoin d'embedre directement des styles, cette méthode est préférable aux propriétés spécifiques, car vous pouvez apprendre les noms des propriétés CSS. Les propriétés CSS dans les feuilles de style internes ou externes sont les mêmes, donc copier-coller et apprendre ce genre de contenu est plus facile.

Ceci est un cercle qui définit la contour et la remplissage via les attributs style et les propriétés CSS :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40" cy="40" r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

Utilisation de la feuille de style en ligne

Vous pouvez définir les styles des formes dans une feuille de style intégrée, puis appliquer automatiquement tous ces styles aux formes. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle {
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40" cy="40" r="24"/>
</svg>

Attention à la manière dont les styles des éléments circle sont définis à l'intérieur de l'élément <style>. Cela fonctionne de la même manière que dans HTML et CSS.

Les feuilles de style internes dans Internet Explorer 7et Firefox 3.0.5fonctionnent normalement.

L'effet est le suivant :

Attribut de classe

Il est possible d'utiliser les attributs des formes pour choisir le style de la forme plutôt que d'appliquer le style à tous les éléments de type spécifique (par exemple, tous les cercles). Comme les classes utilisées dans les éléments HTML,.

Voici un exemple de deux styles de cercles-Les styles verts et rouges.<circle> utilise les attributs de class suivants pour appliquer chaque style à l'élément correspondant :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen　{
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　　circle.myRed　{
　　　　　　　stroke:　#660000;
　　　　　　　fill:　　　#cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle　　class="myGreen"　cx="40" cy="40"　　r="24"/>
　　　　<circle　　class="myRed"　　　cx="40" cy="100" r="24"/>
</svg>

Veuillez noter que le nom du sélecteur de la feuille de style pour circle contient des préfixes .myGreen et .myRed. Maintenant, l'élément <circle> peut utiliser class="myGreen" pour définir le style de cercle vert ou class="myRed" pour définir le style de cercle rouge.

L'utilisation des feuilles de style externes

Lors de l'utilisation des feuilles de style externes, les feuilles de style sont placées dans un fichier distinct, puis placées sur le serveur Web, comme les fichiers CSS externes des pages HTML. De plus, avant l'élément <svg>, vous devez inclure les déclarations suivantes dans le fichier SVG :

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>

Cette instruction de traitement indique à l'interpréteur SVG d'utiliser la feuille de style CSS pour trouver le fichier " svg-stylesheet.css”。

Voici un exemple de déclaration utilisée dans un fichier SVG :

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>
<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="40" cy="40" r="24"
　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

Attention : les feuilles de style CSS externes dans Internet Explorer 7semble fonctionner normalement, mais dans Firefox 3.0.5ne peut pas.

L'utilisation des feuilles de style dans une page HTML.

Si l'image SVG est intégrée dans une page HTML, le tableau de styles de l'image SVG peut également être intégré dans la page HTML. Voici un exemple :

<html>
<body>
<style>
</style>
<svg
</svg>
</body>
</html>

Pour ajouter un style à une forme dans une image SVG, il suffit d'ajouter des attributs CSS standards dans l'élément style. Vous pouvez utiliser les sélecteurs CSS habituels pour définir le style des éléments SVG. Voici une page HTML où l'élément circle est stylisé par un tableau de styles CSS dans la page HTML :

<html>
<body>
<style>
　　circle {
　　　　　stroke: #006600;
　　　　　fill : #00cc00;
　　}
</style>
<svg
　　<circle cx="40" cy="40" r="24"　/>
</svg>
</body>
</html>

Si l'image SVG est intégrée directement dans la page HTML, c'est peut-être la méthode la plus simple pour définir le style des formes SVG.

Couvrir le tableau de styles localement dans la forme

Si le style a été défini dans le tableau de styles, il est possible de couvrir ce style en définissant de nouveaux attributs de style locaux à l'intérieur de la forme à laquelle un nouveau style doit être appliqué. Les styles définis localement à l'intérieur de la forme ont toujours la priorité sur les styles définis dans les tableaux de styles internes ou externes.

Attributs CSS SVG

Les éléments SVG ont les CSS attributs suivants qui peuvent être définis. Non tous les éléments ont tous ces attributs. Par conséquent, les attributs CSS sont divisés en plusieurs tableaux pour différents éléments.

Attributs CSS des formes

Les attributs CSS des éléments path et des autres éléments de forme :

Attributs CSS du texte

Attributs CSS de l'élément texte :

Attributs CSS de dégradé

Attributs CSS de dégradé SVG :