Как оживить цвет svg-штрихов?

Question

У меня есть SVG картину, и я хотел бы, чтобы оживить цвет обводки:

Я попытался это, но ничего не произошло:

$(".svg-path").animate('stroke','blue') 

Он работает, когда я установить свойство непосредственно без анимации это:

$(".svg-path").attr('stroke','blue') 

Можно ли это сделать?

Answer 1

Решено.

Я забыл добавить крюк, чтобы поддерживать другие свойства CSS:

jQuery.Color.hook("stroke"); 

Тогда

$(".svg-path").animate({ 
    'stroke': 'blue' 
}, 200); 

работает очень хорошо!

Answer 2

также работает так:

$(".svgpath").animate({ 
    'stroke-width':'10', 
    svgFill: 'red', 
    svgStroke: 'green' 
    }, 5000); 

использованием svgFill и svgStroke

как в этом fiddle используя jquery.svg.js и jquery.svganim.js ЛИЭС

Источники: уже ответил here

Answer 3

Альтернатива, очень удобно, чтобы указать анимацию в CSS, а так:

$(".svg-path").css({'stroke': 'blue', transition: "0.2s"}); 

Я заметил, что вы не можете использовать .animate() изменить цвет заливки, но .css() с transition отлично работает для цвета заливки также.