本文介绍了SVG图案动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在svg中定义了一个模式.我想连续旋转....我无法在该模式定义上应用动画.我对一个符号应用了相同的动画,它可以工作,但是不能在图案上工作……
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>
这是模式定义.
请帮助我如何将某些变换动画应用于整个模式"以及其单个内容..在这种情况下,是圆圈...
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...
推荐答案
似乎没有什么阻止您将<animateTransform>
放到模式定义中的:
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>
这篇关于SVG图案动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!