悬停时的SVG蒙版和动画

Question

I'm not that good with SVG and mask and I would like to know if it's possible to have this animation on mouse hover? (with jquery or without) What I need: -Html text -SVG 3/4 circle -The background is the div background If it's not possible with html text, it would probably be possible with curve text in the svg...

Here is an image of what I want to achieve:

Answer 1

Couldn't find your font, didn't use math to be precise.

 var wipe_steps = [ [1000, "0,0 500,0 500,500 0,500"], [100, "250,250 0,200 0,0 500,0 500,500 0,500 0,250"], [100, "250,250 0,100 0,0 500,0 500,500 0,500 0,250"], [100, "250,250 0,0 500,0 500,500 0,500 0,250"], [100, "250,250 100,0 500,0 500,500 0,500 0,250"], [100, "250,250 200,0 500,0 500,500 0,500 0,250"], [100, "250,250 250,0 500,0 500,500 0,500 0,250"], [100, "250,250 300,0 500,0 500,500 0,500 0,250"], [100, "250,250 400,0 500,0 500,500 0,500 0,250"], [100, "250,250 500,0 500,500 0,500 0,250"], [100, "250,250 500,100 500,500 0,500 0,250"], [100, "250,250 500,200 500,500 0,500 0,250"], [100, "250,250 500,250 500,500 0,500 0,250"], [100, "250,250 500,300 500,500 0,500 0,250"], [100, "250,250 500,400 500,500 0,500 0,250"], [100, "250,250 500,500 0,500 0,250"], [100, "250,250 400,500 0,500 0,250"], [100, "250,250 300,500 0,500 0,250"], [100, "250,250 250,500 0,500 0,250"], [100, "250,250 200,500 0,500 0,250"], [100, "250,250 100,500 0,500 0,250"], [100, "250,250 0,500 0,250"], [100, "250,250 0,400 0,250"], [100, "250,250 0,300 0,250"], [3000, ""] ]; var wipe_step = 0; function wipe() { wipe_step = wipe_step % wipe_steps.length; $('#wiper').attr('points', wipe_steps[wipe_step][1]); setTimeout(wipe, wipe_steps[wipe_step++][0]); } wipe(); 

 #animation { display: inline-block; width: 500px; height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="animation"> <svg viewBox="0 0 500 500" width="500" height="500"> <defs> <mask id="mising_quad" x="0" y="0" width="500" height="500" maskUnits="userSpaceOnUse"> <rect x="0" y="0" width="500" height="500" fill="white" /> <rect x="0" y="250" width="250" height="250" fill="black" /> </mask> <mask id="radial_wipe_mask" x="0" y="0" width="500" height="500" maskUnits="userSpaceOnUse"> <rect x="0" y="0" width="500" height="500" fill="white" /> <rect x="0" y="250" width="250" height="250" fill="black" /> <rect x="100" y="250" width="150" height="100" fill="white" /> <polygon id="wiper" points="" fill="black" /> </mask> </defs> <rect x="0" y="0" width="500" height="500" fill="rgb(230, 230, 230)" /> <circle cx="250" cy="250" r="200" fill="none" stroke="white" stroke-width="20" mask="url(#mising_quad)" /> <text x="100" y="210" fill="white" font-family="'Lucida Bright',Georgia,serif" font-size="45" font-weight="bold">MESSAGES <tspan x="100" y="270">AUX MEMBRES</tspan> <tspan x="100" y="330">SOCI&Eacute;TAIRES</tspan> </text> <circle cx="250" cy="250" r="200" fill="none" stroke="rgb(27, 125, 189)" stroke-width="20" mask="url(#radial_wipe_mask)" /> <text x="100" y="210" fill="rgb(27, 125, 189)" font-family="'Lucida Bright',Georgia,serif" font-size="45" font-weight="bold" mask="url(#radial_wipe_mask)">MESSAGES <tspan x="100" y="270">AUX MEMBRES</tspan> <tspan x="100" y="330">SOCI&Eacute;TAIRES</tspan> </text> Sorry, your browser does not support inline SVG. </svg> </div>