partial fill a SVG background

Question

New to using SVG.

Is it possible to partially fill an SVG background on a mouse event using Jquery?

The code below fills the entire SVG. Im just curious if you can fill maybe 5% of that at a time?

so for example:

   $('#button').on('click', function(){
   circle1animate();
   });


   function circle1animate(){
       $('#circle1im').css('fill','#000');                          

    }

JSFIDDLE

Thanks

Answer 1

Use a linearGradient in the SVG.

In the SVG:

<linearGradient id="grad">
    <stop offset="0%"  stop-color="red"/>
    <stop offset="0%" stop-color="transparent"/>
</linearGradient>

and in the Javascript:

$('#grad stop').attr('offset',offset+'%');

Like this JSFiddle example.