SVG图案动画

Question

我在SVG中定义了一个图案。我想让它持续旋转...但是我无法在该图案定义上应用动画。我将相同的动画应用于符号，它可以工作，但是在图案上却不起作用...

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

这是图案定义。

请帮助我如何将某些变换动画应用于整个“pattern”，以及其中单个元素（在此例中是圆形）。

- Theprash

Answer 1

您可以在图案定义中添加<animateTransform>元素，似乎没有什么可以阻止您这样做：

<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

---

是的，谢谢回复...我尝试过了，但在我的情况下它不起作用...我正在使用该模式填充“text”到<use>元素中，该元素被定义为符号...这里是链接http://codepen.io/theprash/pen/YyNVro...它在矩形中有效，但在字母g中无效...我第一次尝试时也遇到了同样的问题... - Theprash

@Theprash 对我有效。请在Firefox中尝试。 - Robert Longson

遗憾的是，这在任何IE和Edge中都不起作用。它们支持patternTransform但不支持其动画。 - kernel