Частично заполнить SVG, используя Raphael JS, постепенно
Новое в использовании Рафаэля и попытка найти лучший способ частичного заполнения пути постепенно
в основном идея заключается в том, что, когда вы нажимаете на кнопку, путь заполняется постепенно и линейно. (примерно 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);
});
});
Спасибо за любую помощь, предложения.