SVG - 패턴의 x 위치에 애니메이션 적용

Question

<pattern> 태그를 사용하여 가로로 반복되는 svg를 사용하여 "물결 모양"가장자리를 만들었습니다.

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

내가 왼쪽에서 오른쪽으로 파도를 애니메이션 필요, 나는이 작업을 수행 요소의 X 속성을 변경 나타났습니다. 하지만 jQuery를 사용하여 선택할 수 없습니다.

아이디어가 있으십니까?

n.b - "물결 모양"의 svg 패턴을 색 변환하려고하므로 배경 이미지가 아닌 svg를 사용합니다.

Answer 1

jQuery는 기본적으로 CSS 속성에만 애니메이션을 적용한다고 생각합니다. pattern에있는 x은 속성이므로 사용자 정의 설정 기 기능을 제공해야합니다. jQuery는 pattern 요소를 선택하는 데 문제가 없어야합니다 (svg가 html 문서에서 인라인 인 경우).

다른 라이브러리 사용을 고려해 볼 수 있습니다 (예 : d3.js).