部分填充SVG背景

Question

使用SVG的新手。

是否可以使用Jquery在鼠标事件上部分填充SVG背景？

下面的代码填充整个SVG。 我只是好奇你是否可以一次填写5％的费用？

例如：

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


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

    }

的jsfiddle

谢谢

Answer 1

在SVG中使用linearGradient 。

在SVG中：

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

并在Javascript中：

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

喜欢这个JSFiddle的例子 。