问题描述
TLDR：：我正在尝试确定是否值得花一些时间来掌握 SMIL 。官方消息（至少来自Blink，但可能不是来自Gecko）似乎是该动画技术已被功能弃用 ...但实际情况表明，事实并非如此
我愿意学习SMIL，因为它使我感到赞叹不已，这是一种优雅的技术-但我不希望今年花费几个月的时间来学习一两年后就会过时的东西
问题： 是否值得学习 SMIL ？
几年前，共识是 SVG 的动画语言 SMIL （同步多媒体集成语言）将用于不推荐使用：
2015年4月，眨眼小组写道：
“我们打算弃用SMIL动画，而推荐使用CSS动画和Web动画”
来源： https://groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM）
五年半前打算弃绝的两个主要原因：
追溯到2020年， Internet Explorer 迷失了时间，MSIE的后继者 Edge 现在使用 Blink 渲染引擎（以及铬， Chrome ， Opera ， Brave 等）。
眨眼的主要竞争对手壁虎，也对 SMIL 完全满意：
最终结果是， SMIL 现在在整个现代浏览器环境中都具有 strong支持：
那我们现在在哪里？我们可以放心地忘记自2015年起将要弃用的意图，并在 SMIL 回来并留在这里的基础上开展工作吗？
建议的重复问题及其答案为Blink打算弃用SMIL的最初公告以及后来打算暂停弃用SMIL的后续公告（将在以后恢复）提供了很好的参考。但是讨论是从2016年开始的。这个问题没有考虑到SMIL的拥护者是否会在2020年悄然占上风，尽管缺乏官方的澄清，但不再有确定的意愿淘汰SMIL。 （例如，壁虎似乎从来没有对过时的热情，是吗？）
解决方法
试图确定是否值得花一些时间掌握 SMIL。官方说法似乎是该动画技术 在功能上已弃用...但实际情况表明 根本不是这样。
当然，掌握SMIL值得。
出于许多原因，值得学习：
- SMIL是与其一起开发的本地SVG框架
- 用于SVG的CSS动画仍然无法复制SMIL的所有丰富功能
我将尝试通过具体示例来说明这一点。 - 对SVG过滤器及其属性的CSS动画的支持不佳 CSS对矢量对象及其属性的支持非常弱。例如，宽度，高度，半径，字母作为矢量元素。 Chrome确实开始支持它，但并非所有浏览器都支持。
使用以下示例，我们将考虑动画逻辑SMIL VS CSS动画在组织方面的差异
所有SMIL动画对象通过逻辑条件链相互连接。
例如，小人运动的动画将在绘制路线begin="anPathWalk.end"
CSS中没有这种可能性，有必要计算动画开始时间的绝对值或每次的延迟时间。
这会在设计中带来很大的困难，而在更改对象交互逻辑时会带来更大的困难
在smil中，更改逻辑时，只需更改动画开始的逻辑链，SMIL预处理器将计算必要的动画开始时间
<style>
.container {
width:100%;
height:100%;
}
.play-audio {
position:absolute;
top:0%;
left:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1" viewBox="0 0 800 540" >
<defs>
<path id="walk"
d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19" />
<g id="Man" transform="translate(0,0) scale(1,-1)">
<path fill="none">
<animate
attributeName="d"
begin="0.1s"
dur="0.3s"
repeatCount="indefinite"
values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,16 c4,4 -4,4 0,0;
M 0,16 l 0,0;
M-3,0"/>
</path>
</g>
</defs>
<image xlink:href="https://i.stack.imgur.com/XPdWW.png" width="100%" height="100%" />
<path id="train" stroke-dasharray="312" stroke-dashoffset="312" stroke-width="2" d="M443 534 426 477 415 435 397 391 375 347 350 304 334 277 317 251" style="fill:none;stroke:violet;"/>
<text
font-size="28"
font-family="Times New Roman"
fill="#517DA6" >
<textPath id="result"
xlink:href="#train">
<tspan dx="0" > 🚅 </tspan>
<tspan dx="-12"> - </tspan>
<tspan dx="-15"> 🚃</tspan>
<tspan dx="-12"> -</tspan>
<tspan dx="-15"> 🚃 </tspan>
<tspan dx="-12"> - </tspan>
<tspan dx="-15"> 🚃</tspan>
<tspan dx="-12"> -</tspan>
<tspan dx="-15"> 🚃 </tspan>
<tspan dx="-12"> - </tspan>
<tspan dx="-15"> 🚃</tspan>
<tspan dx="-12"> -</tspan>
<tspan dx="-15" > 🚂 </tspan>
<animate id="anTrain"
begin="0s;an5.end"
dur="12s"
repeatCount="1"
attributeName="startOffset"
values="-60%;45%;45%;-60%"
fill="freeze"/>
</textPath>
</text>
<path id="walk"
stroke-dasharray="409"
stroke-dashoffset="409"
stroke-width="3"
d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"
style="fill:none;stroke:#B34EE9">
<animate id="anPathWalk"
attributeName="stroke-dashoffset"
begin="anTrain.end-7.5s"
dur="2s"
values="409;0"
fill="freeze" />
</path>
<use xlink:href="#Man" transform="translate(0,0) scale(1.2)" style="stroke:blue; fill:black;">
<animateMotion id="an2"
begin="anPathWalk.end"
dur="16s"
repeatCount="1" >
<mpath xlink:href="#walk"/>
</animateMotion>
</use>
<use xlink:href="#Man" transform="translate(0,0) scale(1.2)" style="stroke:crimson;" >
<animateMotion id="an3"
begin="anPathWalk.end+0.5s"
dur="17s" repeatCount="1" >
<mpath xlink:href="#walk"/>
</animateMotion>
</use>
<use xlink:href="#Man"
transform="translate(0,0)
scale(1)"
style="stroke:black;">
<animateMotion id="an4"
begin="anPathWalk.end+1s"
dur="13s"
repeatCount="1" >
<mpath xlink:href="#walk"/>
</animateMotion>
</use>
<use xlink:href="#Man"
transform="translate(0,0)
scale(0.8)"
style="stroke:red;
fill:black;">
<animateMotion id="an5"
begin="anPathWalk.end+1.5s"
dur="11s"
repeatCount="1" >
<mpath xlink:href="#walk"/>
</animateMotion>
</use>
<use xlink:href="#Man"
transform="translate(0,0)
scale(0.8)"
style="stroke:black;">
<animateMotion id="an5"
begin="anPathWalk.end+1.8s"
dur="9.5s" repeatCount="1" >
<mpath xlink:href="#walk"/>
</animateMotion>
</use>
</svg>
</div>
<div class="play-audio">
<audio class="my_audio" controls preload="true" autoplay="autoplay">
<source src="https://w1.musify.club/track/dl/4064186/eruption-one-way-ticket-original.mp3" type="audio/mpeg">
</audio>
<div>
CSS中没有svg textPath类似物（我可能是错的，正确的）
看看在SMIL中制作逼真的动画有多么容易
<!-- https://stackoverflow.com/a/47860596/7394871 -->
<svg width="600" height="400" viewBox="100 100 400 300">
<path id="pathChain" d="M100,200 C100,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>
<text font-size="36" font-family="Times New Roman" fill="grey" >
<textPath id="result" xlink:href="#pathChain">
<tspan dx="0" > ᴑ </tspan> <tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan>
<animate dur="10s" repeatCount="2" attributeName="startOffset" values="1%;55%;1%"/>
</textPath>
</text>
</svg>
3。 SVG过滤器示例
CSS中只有一个属性可用于文本轮廓-webkit-text-stroke:
SVG具有最丰富的过滤器集，可以使用SMIL对其属性进行动画处理
＃3.1使用feMorphology和 feColorMatrix过滤器来概述字母
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
<filter id="outText"
x="-20%" y="-20%" width="300%" height="300%">
<feMorphology operator="dilate" in="SourceAlpha"
radius="4" result="e1" />
<feMorphology operator="dilate" in="SourceAlpha"
radius="1" result="e2" />
<feComposite in="e1" in2="e2" operator="xor"
result="outline"/>
<feColorMatrix type="matrix" in="outline"
values="0 0 0 0 0.2
0 0 0 0 0.1
0 0 0 0 0.5
0 0 0 1 0" result="outline2"/>
<feComposite in="outline2" in2="SourceGraphic"
operator="over" result="output"/>
</filter>
<rect width="100%" height="100%" fill="#111111" />
<text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES
</text>
</svg>
＃3.2中风动画
仅添加一行代码
<animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
<filter id="outText"
x="-20%" y="-20%" width="300%" height="300%">
<feMorphology operator="dilate" in="SourceAlpha"
radius="5" result="e1" />
<feMorphology operator="dilate" in="SourceAlpha"
radius="1" result="e2" />
<feComposite in="e1" in2="e2" operator="xor"
result="outline"/>
<feColorMatrix type="matrix" in="outline"
values="0 0 0 0 0.2
0 0 0 0 0.1
0 0 0 0 0.9
0 0 1 1 0" result="outline2"/>
<feComposite in="outline2" in2="SourceGraphic"
operator="over" result="output"/>
</filter>
<rect width="100%" height="100%" fill="#111111" />
<text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4" > DES
<animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
</text>
</svg>
＃3.3水湍流效应
为获得湍流效果，使用了过滤器feTurbulence， feDisplacementMap
将鼠标悬停在图片上以开始动画
<style>
.container {
width:60%;
height:60%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 300">
<defs>
<filter id="myFilter" >
<feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
<animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<image id="img1" xlink:href="https://i.stack.imgur.com/hHGO8.jpg" width="100%" height="100%" filter="url(#myFilter)" />
</svg>
</div>
4。字母作为向量
SVG中的任何文本都是矢量对象。因此，整个单词或其中包含的每个字母的坐标为x,y
因此，您可以使用SMIL更改这些坐标以创建各种动画效果。
以下是可能出现的飞行字母示例
<style>
#text1 {
fill:#D0FF00;
}
</style>
<svg id="svg1" width="70%" height="70%" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<title>Animation of text x and y attributes</title>
<defs>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="100%"
gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="#151515" />
<stop offset="70%" stop-color="yellowgreen" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<text x="200 " y="500"
font-size="90" fill="#d3d3d3" stroke-width="1" stroke="#d3d3d3">Stackoverflow</text>
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200 233 266 299 332 365 400 431 464 497 530 563 596;
100 600 200 365 700 465 465 563 530 398 431 850 900;
200 500 900 950 150 531 300 620 150 266 365 650 900;
332 233 820 300 800 633 200 670 300 850 800 530 266;
464 900 900 900 820 670 430 900 530 600 233 365 100;
332 100 100 100 500 100 800 563 900 700 900 100 100;
200 233 266 299 332 365 400 431 464 497 530 563 596"
dur="4s"
begin="svg1.click"
repeatCount="2" />
<animate xlink:href="#text1"
attributeName="y"
attributeType="XML"
values="500 500 500 500 500 500 500 500 500 500 500 500 500;
100 200 850 100 250 175 750 100 750 720 850 500 50;
100 600 600 250 200 450 50 200 520 550 300 300 750;
500 100 650 650 600 150 550 50 150 550 200 550 400;
800 300 100 750 150 650 75 350 550 700 755 120 800;
800 600 300 150 750 350 700 650 200 250 500 650 100;
500 500 500 500 500 500 500 500 500 500 500 500 500"
dur="3s"
begin="svg1.click"
repeatCount="2" />
</svg>
更新
世界地图上的StackOverflow
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 150 1800 1253" >
<defs>
<path id="Strack" d="m322.1 281.9c0 0 75.6 16 97.2 44.3 38 49.7-13.2 140.2 30.3 185.2 32.5 33.6 94.4 9.6 137.7 27.2 26.4 10.7 44.3 38.6 71.6 46.7 7 2.1 21.8 0 21.8 0" fill="none" stroke="black" />
<path id="Ttrack" d="m 144.7062,657.68616 c 0,0 37.753,-102.00963 83.24497,-115.92056 40.72325,-12.4527 79.61954,30.26928 119.81051,44.34545 31.19139,10.92423 61.09073,30.67633 94.13684,31.11961 25.18481,0.33783 47.2325,-23.61256 72.3531,-21.78373 26.84437,1.95434 48.54017,23.28963 73.1311,34.23157 11.57342,5.1497 19.26927,7.93532 35.00956,14.78182 32.47733,14.12656 11.1456,44.34609 68.43253,-59.12726" fill="none" />
<path id="Atrack" d="m1145.2 859.2c0 0 25.7-28.7 27.2-46.7 2.4-27.5-8.5-59-28.8-77.8-31.6-29.4-89.6-10.3-124.5-35.8-36.7-26.9-35.4-92.1-75.5-113.6-74.3-39.8-252.9 0-252.9 0" fill="none" />
<path id="Ctrack" d="m220 368.1c0 0 73.9 53.2 89.1 93.5 16.5 43.6-26.4 98.1-5.5 139.7 22.7 45.3 76.6 72.2 125.4 85.8 51.6 14.4 107.1-12.2 160.6-8.8 82.6 5.3 206.4 118.7 244.3 45.1 30.3-59-143.2-138.1-143.2-138.1" fill="none" />
<path id="Ktrack" d="m1555.7 922.6c0 0 25.2-71.8 14.3-105.6-10.8-33.6-51.3-48.9-72.6-77-39.7-52.5-75.9-108.7-101.2-169.4-12.5-30.1 11.3-48.4-24.2-94.6-64.2-83.6-204.6-76.2-246.5-5.5-54.4 91.9 207.9 181.5 160.6 277.3-45.5 92.2-206 64.1-305.9 39.6C866 759.3 690.8 585.3 690.8 585.3" fill="none" />
<path id="all_Letter" transfotm="translate(0 -55)" d="M690.8 585.3H505c0 0-229.3 55.3-267.8-25.7-23.1-48.7 71.5-83.7 89.7-134.4 16-44.7-28.4-120.8 14.2-141.8 71.8-35.4 126 108.5 204 126.5 82.6 19.1 169.7-41.5 253.1-25.9 75.4 14.1 128.4 101.5 205 104.4 94.6 3.5 169.3-129.2 261.9-109.6 92.6 19.6 181 112.9 194.9 206.5 6.8 45.6-19.5 105-61.6 123.8-60.4 27-125.4-55.6-191.5-52.5-84.9 3.9-157.1 113.9-238.7 90-64.3-18.9-60.1-131.1-119.9-161.2-46.9-23.6-157.5 0-157.5 0z" style="fill:none;stroke-width:3;stroke:#0000f1"/>
<!-- Shadow for letters -->
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="8" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<linearGradient id="gradEarth">
<stop offset="40%" stop-color="dodgerblue"></stop>
<stop offset="100%" stop-color="yellowgreen" ></stop>
</linearGradient>
<linearGradient id="Lg" x2="0" y2="0%">
<stop offset="10%" stop-color="yellow"></stop>
<stop offset="25%" stop-color="#F437FE"></stop>
<stop offset="50%" stop-color="dodgerblue"></stop>
<stop offset="75%" stop-color="#1EFE6B"></stop>
<stop offset="100%" stop-color="red"></stop>
<animate attributeName="y2" dur="8s" values="0%;100%;100%;0%;0%" repeatCount="indefinite" />
</linearGradient>
</defs>
<image xlink:href="https://i.stack.imgur.com/lDCcN.jpg" width="1800px" height="1253px" opacity="0.8" />
<g id="Gr_All" >
<!-- Letter "S" -->
<g id="Sgroup" transform="scale(1.5)" filter="url(#dropShadow)">
<!-- Left leg -->
<path id="leftF" fill="crimson" d="m31.9 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2M58.7 64.5" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
values="0,29.41,64.39;30,64.39;0,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<!-- Right leg -->
<path id="rightF" fill="crimson" d="m58.7 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
values="0,56.21,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<!-- Outline letter "S" -->
<path class="Sbody" fill="url(#Lg)" d="m59.3 12.8 6.4 20.3q-5.3-4.5-9.5-6.9-4.2-2.4-6.8-2.4-2 0-3.1 1.1-1.1 1.1-1.1 3 0 2.4 2.4 4.3 2.4 1.9 7.5 3.4 11.3 3.4 15.3 6.7 4 3.3 4 8.4 0 8.3-8.1 13.6-8.1 5.3-20.9 5.3-6.5 0-12.9-2.3-6.4-2.4-11.8-6.7V69.6L13.9 49.3q4.7 3.8 9.2 5.9 4.6 2 8.3 2 4 0 6.2-1.7 2.2-1.7 2.2-4.7 0-2.8-1.8-4.5-1.8-1.7-8-3.6-9-2.9-13.5-6.8-4.4-4-4.4-9.3 0-6.7 5.9-11 5.9-4.3 15.4-4.3 6.2 0 12.2 2.2 5.9 2.2 12.2 6.9z">
<!-- Wiggle the letter "S" -->
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1.5s"
values="
0,43.25,51.14;
30,51.14;
0,51.14;
-30,51.14"
fill="freeze"
repeatCount="indefinite"
additive="sum"
restart="whenNotActive" />
</path>
</g>
<animateMotion xlink:href="#Sgroup" begin="btn1.click" dur="18s" restart="whenNotActive">
<mpath xlink:href="#Strack" />
</animateMotion>
<!-- Letter "T" -->
<g id="Tgroup" transform="scale(1.5)" filter="url(#dropShadow)">
<path id="Tleft" fill="#F437FE" d="m90.2 66.8c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M117 66.8" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="1s"
values="0,87.71,66.69;30,66.69;0,66.69" fill="freeze" repeatCount="indefinite" />
</path>
<path id="Tright" fill="#F437FE" d="m117 66.8c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1s"
values="0,114.51,66.69" fill="freeze" repeatCount="indefinite" />
</path>
<path class="TBody" fill="#F437FE" d="M136.9 11.5 118.6 47.3 116.2 20 108.9 60.1 121.7 69.6 87 67.7 96.1 61 85.5 19.2 81.9 52.3 74.5 15.7Z">
<!-- Wiggle the letter "T" -->
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
values="
10,105.69,52.39;
-10,52.39;
10,52.39"
fill="freeze"
repeatCount="indefinite"
additive="sum"
restart="whenNotActive" />
</path>
</g>
<animateMotion xlink:href="#Tgroup" begin="btn1.click" dur="18s" restart="whenNotActive">
<mpath xlink:href="#Ttrack" />
</animateMotion>
<!-- Letter "A" -->
<g id="Agroup" transform="scale(1.5)" filter="url(#dropShadow)">
<path id="Aleft" fill="dodgerblue" d="m147.4 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M183.5 64.5" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
values="0,144.91,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<path id="Aright" fill="dodgerblue" d="m183.5 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
values="0,181.01,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<path class="ABody" fill="dodgerblue" d="m171 38-5.3-15.1-5.1 18.6zm30.5 21.7-33 10.2 8.4-11.3-2.4-8.4-12.3 0.9-3.6 9.8 5.3 4.2-35.9 2.6 8.7-6.5 11.6-45.2-6.6-4.3 44.5 1.5-10.4 3.7 18.2 40.6z">
<!-- Wiggle the letter "A" -->
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
values="
0,164.7,51.4;
30,51.4;
0,51.4;
-30,51.4"
fill="freeze"
repeatCount="indefinite"
additive="sum"
restart="whenNotActive" />
</path>
</g>
<animateMotion xlink:href="#Agroup" begin="btn1.click" dur="18s" restart="whenNotActive">
<mpath xlink:href="#Atrack" />
</animateMotion>
<!-- Letter "C" -->
<g id="Cgroup" transform="scale(1.5)" filter="url(#dropShadow)">
<path id="Cleft" fill="#1EFE6B" d="m212.7 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M238.4 64.5" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="1s"
values="0,210.21,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<path id="Cright" fill="#1EFE6B" d="m238.4 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1s"
values="0,235.91,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<path class="CBody" fill="#1EFE6B" d="m256.7 40.5-4 26.3-1.6-10.7q-5.5 6.5-12.1 9.9-6.6 3.4-13.8 3.4-4.7 0-9.2-1.9-4.5-2-8.1-5.7-4.3-4.3-6.6-9.7-2.3-5.4-2.3-11 0-7.8 3.3-14.2 3.3-6.4 9.3-10.5 4-2.7 8.7-4 4.7-1.3 10.1-1.3 5 0 9.2 1.6 4.3 1.6 8 4.7l2.2-6.3 3.9 20.7q-2.5-3.6-5.9-5.5-3.4-1.9-7.3-1.9-4.5 0-7.3 2.7-2.8 2.6-2.8 7 0 4.6 3.4 7.8 3.4 3.1 8.6 3.1 3.2 0 6.6-1.1 3.4-1.1 7.4-3.4z">
<!-- Wiggle the letter "C" -->
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
values="
10,227.9,51.1;
-10,51.1;
10,51.1"
fill="freeze"
repeatCount="indefinite"
additive="sum"
restart="whenNotActive" />
</path>
</g>
<animateMotion xlink:href="#Cgroup" begin="btn1.click" dur="18s" restart="whenNotActive" >
<mpath xlink:href="#Ctrack" />
</animateMotion>
<!-- Letter "K" -->
<g id="Kgroup" transform="scale(1.5)" filter="url(#dropShadow)">
<path id="Kleft" fill="#FFDD00" d="m274.6 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M313 64.5" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
values="0,272.11,64.39" repeatCount="indefinite" />
</path>
<path id="Kright" fill="#FFDD00" d="m313 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
values="0,310.51,64.39" fill="freeze" repeatCount="indefinite" />
</path>
<path class="KBody" fill="#FFDD00" d="m329.1 68.8-30.1-3.7 6-3.9-17.6-18.1-2 0.4 4.1 20.1 6.4 6.8-38.1-4.3 6.8-5 3.6-41.2-7.4-4.7 30.5-3.7-8.5 6.6 2.5 16 13.4-15.9-3.7-4.6 27.7 1-19.7 15.8z">
<!-- Wiggle the letter "K" -->
<animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
values="
0,293.5,51.3;
30,51.3;
0,51.3;
-30,51.3"
fill="freeze"
repeatCount="indefinite"
additive="sum"
restart="whenNotActive" />
</path>
</g>
<animateMotion id="an_k" xlink:href="#Kgroup" begin="btn1.click" dur="18s" restart="whenNotActive" >
<mpath xlink:href="#Ktrack" />
</animateMotion>
<!-- Animating all letters together -->
<animateMotion xlink:href="#Gr_All" begin="an_k.end" dur="18s" repeatCount="15" >
<mpath xlink:href="#all_Letter" fill="freeze" additive="sum" restart="whenNotActive" />
</animateMotion>
</g>
<g id="btn1" transform="translate(-300,150)" onclick='play()' >
<circle cx="736" cy="263" r="8" fill="url(#gradEarth)" filter="url(#dropShadow)" />
<text id="txt1" x="750" y="270" font-size="2rem" fill="crimson" >Start</text>
</g>
</svg>
<script>
var zodiac = new Audio();
zodiac.src = src="https://ruv.hotmo.org/get/music/20170902/Bobby_McFerrin_-_Dont_Worry_Be_Happy_47980580.mp3";
function play() {
zodiac.play();
}
</script>
</div>
从以上示例可以看出，SMIl可以为CSS做的很多事情都不可行或支持不佳
世界上已经开发了许多可运行的SMIL应用程序，因此，在2016年他们希望废除smill时，开发人员在Chrome博客中询问如何处理已创建的应用程序，以及在何处可以替代。还没有答案。
我希望SMIL将继续生存。
,SMIL 的弃用得到了 suspended。引用，以防网站更改：
尽管 Chrome 45 弃用了 SMIL，转而支持 CSS 动画和 Web 动画，但 Chrome 开发人员自 suspended 起就弃用了。
引用链接：
因此，我们决定暂缓弃用的意图，并针对其他选项采取更小的步骤。
SMIL 不仅可以做很棒的事情，而且对例如。 CSS 动画，它提供了另一种思考 DOM 动画的方式。我认为即使很少使用它也很有用。一些替代方案，例如。 CSS Houdini 已经酝酿多年，但没有跨浏览器的可用性。所以这取决于每个人是否值得；取决于可用时间。也可以为了好玩而做。 Lottie/Bodymovin 等 JS（非 SMIL）库也是如此