使用Raphael JS逐步填充SVG

时间:2013-11-26 16:25:35

标签: svg path raphael fill

使用Raphael的新手,并试图找到以增量方式部分填充路径的最佳方法

基本上这个想法是,当你点击按钮时,路径会逐渐填充并呈线性。 (大约15-20%的增量)

通过Raphael文档阅读,看看是否有一些示例显示了一个很好的解决方案。

 var button1 = $('#button1');

 $(document).ready(function(){


 var rsr = Raphael('rsr', '300', '300');

var path_c = rsr.path("M168.846,131.616L56.634,196.404 c-35.78-61.978-14.546-141.216,47.424-176.996c20.639-11.915,40.961-17.36,64.787-17.36V131.616z"); 
path_c.attr({fill: '#000',stroke: '#000000',"stroke-width": '0',"stroke-miterlimit": '10',parent: 'group_a','stroke-opacity': '1'}).data('id', 'path_c');


/* add a click handler */
button1.click(function(){

/* animate the shape  */


path_c.animate({fill:"red", "stroke-width": 1}, 2000);


}); 

});

感谢您的任何帮助,建议。

FIDDLE

0 个答案:

没有答案