Search code examples
svgsnap.svgsvg-filterssvg-animate

SVG pattern animation


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...


Solution

  • 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>