@
cyrbuzz 这个...比预想的要简单，都有现成的 API 。
```
<svg xmlns="
http://www.w3.org/2000/svg" width="160" height="160" onclick="pause(this)" id="ff">
<g>
<rect
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="square"
width="100"
height="100"
x="30"
y="30"
>
<animate
id="frame1"
attributeName="display"
values="inline;none;none;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</rect>
<path
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="circle"
d="m 125,80 a 45,45 0 1 1 -90,0 45,45 0 1 1 90,0 z">
<animate
id="frame2"
attributeName="display"
values="none;inline;none;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</path>
<path
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="triangle"
d="M 105,105 47,89 89,46 105,105 z">
<animate
id="frame3"
attributeName="display"
values="none;none;inline;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</path>
</g>
</svg>
<input type="text" placeholder="指定帧 1-3" onblur="setFrames(this.value)">
<script>
var a = true
function pause(t) {
a ? t.pauseAnimations() : t.unpauseAnimations()
a = !a
}
var b = document.querySelector('#ff')
cc = {
1: '0',
2: '0.33',
3: '0.66'
}
function setFrames(value) {
b.pauseAnimations()
a = !a
b.setCurrentTime(cc[value])
}
</script>
```
svg 复制自题主给的文章...搜了一下 svg 直接可以指定 onclick，在浏览器里控制台里可以看到 svg 控件有 pauseAnimation 和 unpauseAnimations，顾名思义一个暂停一个不暂停，实现 播放和暂停功能。循环这个不知道是啥..本身就是循环的，指定帧发现了一个叫 setCurrentTime 的 API，这个 API 可以指定当前 SVG 的时间，每个<animate>块都指定了 values 和 keyTimes 对应时间的 display 值，建立一个映射表即可。