1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <?xml version="1.0"?>
<svg width="300" height="300" viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<style type="text/css">
<![CDATA[
svg {
border:1px solid #abc;
}
#myCircle:hover {
opacity:1;
cursor:pointer;
}
#myCircle:hover ~circle{
stroke:#f80
}
]]>
</style>
<defs>
<!-- ellipse -->
<path id="myEllipse" d="m63.31641,140c0,-34.63182 39.01586,-62.68359 87.18359,-62.68359c48.16771,0 87.18359,28.05177 87.18359,62.68359c0,34.63182 -39.0159,62.68359 -87.18359,62.68359c-48.16773,0 -87.18359,-28.05177 -87.18359,-62.68359z" stroke-linecap="null" stroke-linejoin="null" stroke="null" fill="#ffaaaa"/>
</defs>
<!-- grand cercle -->
<path id="myCircle" d="m87.31641,140c0,-34.63182 28.05177,-62.68359 62.68359,-62.68359c34.63181,0 62.68359,28.05177 62.68359,62.68359c0,34.63182 -28.0518,62.68359 -62.68359,62.68359c-34.63182,0 -62.68359,-28.05177 -62.68359,-62.68359z" stroke="#0000bf" fill="#cde" opacity="0.5"/>
<!-- petit cercle sur trajectoire ellipse -->
<circle cx="" cy="" r="10" stroke="#ff0000" fill="#ffffff" fill-opacity="0.5">
<animateMotion dur="12s" repeatCount="indefinite">
<mpath xlink:href="#myEllipse"/>
</animateMotion>
</circle>
<!-- Texte trajectoire cercle -->
<text id="myText" font-weight="bold" text-anchor="middle" font-family="Serif" font-size="24" stroke-width="1" stroke="#080" fill="#fff" fill-opacity="0.5">
Tourne
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#myCircle"/>
</animateMotion>
</text>
</svg> |
Partager