使用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; 
}