« Découvrir le SVG/Manipulations avancées » : différence entre les versions
Contenu supprimé Contenu ajouté
m →Feuille de style externe : typo |
Passage de la souris (hover) |
||
Ligne 587 :
/>
</svg>
</source>
==== Passage de la souris ====
L'exemple suivant permet de modifier l'apparence d'objets lorsque le pointeur de la souris survole l'objet ''({{lang|en|hover}})''<ref>{{lien web
| url = https://groups.google.com/d/msg/mozilla.dev.tech.svg/fHWe2nqxw_M/9tisrhTmAAAJ
| lang = en
| auteur = Jeremie Patonnier
| titre = Re: Good place to be asking non FF SVG questions?
| date = 2017-08-31 | consulté le = 2017-09-01
}}</ref>.
Fichier SVG :
<source lang="xml">
<svg width="150" height="150" viewBox="0 0 100 100">
<g class="highlight">
<g>
<circle cx="50" cy="50" r="40" />
<text x="50" y="60" text-anchor="middle" fill="#FFF">Hi!</text>
</g>
</g>
</svg>
</source>
Fichier CSS :
<source lang="css">
text {
fill: #FFF;
font: bold 30px sans-serif;
stroke-width: 0;
}
.highlight {
stroke: #0F0;
stroke-width: 0;
transition: stroke-width 300ms;
}
.highlight:hover {
stroke-width: 10px;
}
.highlight:hover text {
stroke-width: 1px;
}
</source>
| |||