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