使用CSS动画沿着路径填充SVG

Question

我见过很多关于如何完成像here这样的颜色的完整对象动画的问题和解答。但是，是否有可能通过填充（路径的内部）来制作一个尖锐的移动色块？如何去动画一个SVG呢？

Answer 1

有几个JavaScript库，你可以看看：svgjs或Snap.svg ....应该指出你在正确的方向。

只是一段简短的代码来说明如何快速工作。我只会给你一个你想要改变悬停的svg填充的参数。

<svg id="targetSvg" ...> 
    <!-- path forming the upper shell --> 
    <g> 
    <path id="1" fill="#000" d="..."/> 
    <path id="2" fill="#fff" d="..."/> 
    <path id="3" fill="#000" d="..."/> 
    </g> 
</svg> 

的Javascript

//select the svg you want to have the effect on 
s = Snap("#targetSvg"); 

s.select("g").hover(isHover, idHoverOut); 

function isHover() { 
    this.selectAll('path').forEach(function(el){ 
     el.attr({ class: 'fadeIn' }) }); 
}; 

function isHoverOut() { 
    this.selectAll('path').forEach(function(el){ 
     el.attr({ class: 'fadeOut' }) }); 
}; 

CSS样式

.fadein { 
    transition: fill 1s linear; 
    fill:blue; 
} 

.fadeout { 
    transition: fill 1s linear; 
}