SVG图案动画
SVG pattern animation
我已经在 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" 以及其中的个别内容..在这种情况下是圆...
似乎没有什么可以阻止您将 <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>
我已经在 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" 以及其中的个别内容..在这种情况下是圆...
似乎没有什么可以阻止您将 <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>