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。