SVG - 動畫圖案的x位置

Question

我用svg創建了一個「波浪形」邊緣，使用<pattern>標籤水平重複。

http://fiddle.jshell.net/FEFLq/3/

我需要從左至右動畫浪，我注意到在元素上更改x屬性做到這一點。但我無法使用jQuery進行選擇。

任何想法？

n.b - 我打算顏色變換「波浪」svg模式，因此使用svg而不是背景圖像。

Answer 1

我認爲jQuery只默認動畫CSS屬性。 pattern上的x是一個屬性，因此您必須爲其提供自定義設置函數。選擇pattern元素時，jQuery應該沒有問題（只要svg在html文檔中是內聯的）。

或者，您可以考慮使用另一個庫，例如d3.js。