使用javascript的SVG填充動畫

Question

我有一個svg圖像。而且我想在這個圖像上創建一個「填充動畫」，這樣圖像就會從圖像的一端開始填充顏色，然後繼續以某種顏色填充圖像。 說，在圖像中，顏色將從最右端開始填充，然後慢慢繼續填充，就像繪製實際圖像一樣。 這可以在JavaScript中完成。

Answer 1

最簡單的方法是可能使用jQuery與名爲Velocity的第三方庫混合使用。

Velocity是專門處理顏色，變換，循環，緩動，SVG和滾動動畫的庫。

$("#rect") 
 
    .delay(1000) 
 
    .velocity({ 
 
    fill: "#ff0000", 
 
    height: "100", 
 
    width: "100" 
 
    }, { 
 
    duration: 1000 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script> 
 
<svg> 
 
    <rect id="rect" width="25" height="25" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" /> 
 
</svg>

顯然這個演示是很簡單，但也有很多定製的提供，沒有你的問題中的任何在前代碼將很難得到你正在尋找確切的療效的。

• jQuery
• Velocity