Search code examples
jquerysvgfill

partial fill a SVG background

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

Solution

  • 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.