I have a pattern definition in SVG that has two transform definitions in its patternTransform attribute:
<pattern id="pa" x="0" y="0" width="400" height="400" patternTransform="rotate(0) translate(0)" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="400" height="400" filter="url(#fa)"></rect>
</pattern>
Using an <animateTransform> element, I'm able to successfully animate a single transform definition.
<pattern id="pa" x="0" y="0" width="400" height="400" patternTransform="rotate(0) translate(0)" patternUnits="userSpaceOnUse">
<animateTransform attributeName="patternTransform" attributeType="XML" type="translate" from="0" to="400" dur="10s" repeatCount="indefinite"></animateTransform>
<rect x="0" y="0" width="400" height="400" filter="url(#fa)"></rect>
</pattern>
However I'd like to animate both the rotate and translate transforms with the patternTransform element.
Adding two <animateTransform> elements only applies the last animation, since they are both animating the same attribute. (Note, for this reason this question is not a duplicate of the question Multiple animations on SVG element).
An article on TutsPlus called How to Use “animateTransform” for Inline SVG Animation describes an approach to apply multiple <animateTransform> elements to a single entity by wrapping the entity in a <g> and applying the second animation to the group, but that won't work for pattern definitions since they can't be grouped.
Is there a way to animate multiple transform definitions in a pattern's patternTransform attribute using SMIL?
