javascript - SVG - 图案的 x 位置动画

Question

我使用 svg 创建了一个“波浪”边缘，使用<pattern>标签水平重复。

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

我需要从左到右为波浪设置动画，我注意到更改元素上的 x 属性可以做到这一点。但我无法使用 jQuery 选择它。

有任何想法吗？

nb - 我打算对“波浪” svg 图案进行颜色转换，因此使用 svg 而不是背景图像。

Answer 1

我认为 jQuery 默认情况下只会为 CSS 属性设置动画。xon是一个属性，因此pattern您必须为其提供自定义设置器函数。jQuery 选择元素应该没有问题pattern（只要 svg 在 html 文档中是内联的）。

或者，您可以考虑使用另一个库，例如d3.js。