3

I have defined a pattern in svg. I want to rotate it continuously.... I'm not able to apply animation on that pattern definition. i applied same animation to a symbol , it works but its not working on pattern... 

<pattern id="GPattern"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(35)"
        >
        <circle id="mycircle" cx="10" cy="10" r="10" style="stroke: none; fill: red" > </circle>
     </pattern>

this is pattern def.

Please help me how i can apply certain transform animation to whole "pattern" as well as to individual contents of it.. in this case circle...

Community
  • 1
  • 1
Theprash
  • 147
  • 1
  • 2
  • 9

1 Answers1

7

There doesn't seem to be anything stopping you dropping an <animateTransform> into the pattern definition:

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <pattern id="GPattern" x="10" y="10" width="20" height="20"
             patternUnits="userSpaceOnUse"
             patternTransform="rotate(35)">
      <animateTransform attributeType="xml"
                        attributeName="patternTransform"
                        type="rotate" from="35" to="395" begin="0"
                        dur="60s" repeatCount="indefinite"/>
      <circle cx="10" cy="10" r="10" stroke="none" fill="red"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="url(#GPattern)"/>
</svg>
r3mainer
  • 23,981
  • 3
  • 51
  • 88
  • Yeah thanks for response... i did this but its not working in my case... i'm using that pattern as fill in "text" inside element which defined as symbol... http://codepen.io/theprash/pen/YyNVro here is link.. its working in rectangle but non in letter g... had same problem... when i tried first time.. – Theprash Sep 30 '15 at 07:39
  • @Theprash Works for me. Try it in Firefox. – Robert Longson Sep 30 '15 at 13:57
  • Sadly, this will not work in any IE and Edge. They do support patternTransform but not the animation of it. – kernel Mar 10 '17 at 09:22