SVG InlineSVG et CSS
Utilisation du CSS sur des balises SVG
C'est par l'utilisation de la pseudo classe "hover" que nous pouvons dynamiquement changer la couleur de nos rectangles.
Pour tester cet exemple, survolez les différents rectangles avec votre souris:
Explication:
Pour tester cet exemple, survolez les différents rectangles avec votre souris:
Explication:
- Premier rectangle: pas de couleur définie, donc couleur par défaut du navigateur
- Deuxième rectangle: appel de la classe de style CSS vertrect
- Troisième rectangle: utilisation de l'attribut de balise fill (fill="red")
- Quatrième rectangle: appel de la classe de style CSS bleurect
- Cinquième rectangle: utilisation de l'attribut de balise style (style="fill:pink")
Voici le code correspondant :
<style type="text/css" media="screen">
rect.vertrect {fill:green;}
rect:hover {fill:yellow;}
</style>
<svg height="75px" width="75px">
<rect id="myRect1" height="100%" width="100%" >
</svg>
<svg height="75px" width="75px">
<rect id="myRect2" height="100%" width="100%" class="vertrect"/>
</svg>
<svg height="75px" width="75px">
<rect id="myRect4" height="100%" width="100%" fill="red"/>
</svg>
<svg height="75px" width="75px">
<rect id="myRect5" height="100%" width="100%" class="bleurect"/>
</svg>
<svg height="75px" width="75px">
<rect id="myRect3" height="100%" width="100%" style="fill:pink"/>
</svg>
Source: David Rousset
<style type="text/css" media="screen">
rect.vertrect {fill:green;}
rect:hover {fill:yellow;}
</style>
<svg height="75px" width="75px">
<rect id="myRect1" height="100%" width="100%" >
</svg>
<svg height="75px" width="75px">
<rect id="myRect2" height="100%" width="100%" class="vertrect"/>
</svg>
<svg height="75px" width="75px">
<rect id="myRect4" height="100%" width="100%" fill="red"/>
</svg>
<svg height="75px" width="75px">
<rect id="myRect5" height="100%" width="100%" class="bleurect"/>
</svg>
<svg height="75px" width="75px">
<rect id="myRect3" height="100%" width="100%" style="fill:pink"/>
</svg>
Source: David Rousset
