我用两个圆圈创建了一个非常简单的 SVG 动画,一个实心圆圈在一个虚线圆圈中。制作外部虚线圆的 360 度旋转动画很简单。
我想尝试的是通过缩小 10% 然后再回到 100% 来让内部的实心圆“脉动”。
问题是,到目前为止,我为 animateTransform
找到的所有文档都只涉及 2 个“关键帧”,from-to。因此,圆圈将从 100% 变为 90%,然后它会重复并跳回 100%。我正在寻找它来“乒乓”,去 100->90->100->90
等等。
这可以用原生 SVG 动画来完成吗(即没有 CSS 也没有库)?
<svg xmlns="http://www.w3.org/2000/svg" width="106" height="106" viewBox="0 0 106 106" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="a" cx="50" cy="50" r="50"/>
<mask id="b" width="100" height="100" x="0" y="0" fill="white">
<use xlink:href="#a"/>
</mask>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(3 3)">
<use stroke="#979797" stroke-width="12" mask="url(#b)" stroke-dasharray="6 9" xlink:href="#a">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
repeatCount="indefinite" />
</use>
<circle cx="50.5" cy="50.5" r="36.5" fill="#D8D8D8"/>
</g>
</svg>
最佳答案
如果有人感兴趣的话,我发现了一个隐藏的答案。对于内圈:
<circle cx="50.5" cy="50.5" r="36" fill="#084b86">
<animate attributeName="r"
values="36;20;36"
dur="2s"
repeatCount="indefinite" />
</circle>
关键是 values
属性,它可以采用分号分隔的列表。
如果有人知道更好或更聪明的方法,请分享!
关于css - 原生 SVG 循环动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38938057/