SVG图案动画

2024-04-10

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

这是模式定义。

请帮助我如何将某些变换动画应用于整个“图案”以及它的各个内容。在本例中是圆圈...


似乎没有什么可以阻止你放弃<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SVG图案动画 的相关文章