部分填充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 example。