Easy-Micro


LANGAGE SVG Inline
SVG 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:


<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

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")

Pour aller plus loin..



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 16 janvier 2019 - Semaine 03 - Saint Marcel (Demain: Sainte Roseline)
Aujourd'hui, c'est l'anniversaire de Richard Bohringer (1942-77 ans), acteur (subway, Diva, Le grand chemin...), réalisateur (2006 : C'est beau une ville la nuit, d'après son livre publié en 1988), chanteur et écrivain français. Autre 16 janvier: 1920 - L'alcool est prohibé aux Etats-Unis.
Haut de page Easy-Micro