用于 SVG 的 SMIL 是否已弃用、未弃用或...暂停但最终将被弃用？
Is SMIL for SVG deprecated, un-deprecated or... paused but will eventually be deprecated?
TLDR: 我正在尝试确定是否值得花一些时间掌握 SMIL。官方说法（至少来自 Blink，但可能不是来自 Gecko）似乎是这种动画技术 在功能上已被弃用 ... 但实际情况表明这不是完全没有。
我 会 喜欢学习 SMIL，因为它给我留下了深刻的印象，因为它是一种优雅的技术 - 但我不想今年花几个月的时间学习一些会过时的东西一两年后。
问题： 是否值得学习SMIL?
几年前，大家一致认为 SVG 的动画语言 SMIL (Synchronized Multimedia集成语言) 将被弃用：
2015 年 4 月，Blink 团队写道：
"We intend to deprecate SMIL animations in favor of CSS animations and Web animations"
Source: https://groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM)
五年半前意图弃用的两个主要原因似乎是：
- "在实现方面，SMIL 显着增加了 Blink 的复杂性"
- “Internet Explorer 不支持 SMIL，这限制了它对关键功能的使用”
滚到 2020 年，Internet Explorer 迷失在时间的迷雾中，MSIE 的继任者 Edge 现在使用 Blink 渲染引擎（与 Chromium、Chrome、Opera、Brave 等）。
Blink 的主要竞争对手，Gecko，also 对 微笑:
最终结果是 SMIL 现在在整个现代浏览器领域得到 强大支持：
那么我们现在在哪里？我们能否安全地忘记 2015 年的弃用意向并在 SMIL 回来并继续存在的基础上工作？
提议的重复问题及其答案为 Blink 最初宣布打算弃用 SMIL 以及后来宣布打算暂停弃用 SMIL（稍后将恢复）提供了很好的参考。但讨论是从 2016 年开始的。这个问题并没有考虑到 2020 年 SMIL 的拥护者是否可能（？）已经悄然占上风，尽管没有官方的澄清，但可能不再有任何坚决反对 SMIL 的意图。 （例如，Gecko 似乎从未有过反对 SMIL 的热情，是吗？）
trying to establish whether it's worth spending some time mastering
SMIL. The official line appears to be that this animation technology
is functionally deprecated... but the reality on the ground suggests
this isn't the case at all.
在我看来当然值得掌握 SMIL。
原因很多，值得学习：
- SMIL 是用它开发的原生 SVG 框架
- CSS SVG 动画仍然无法复制 SMIL 的所有丰富功能
我将尝试通过具体示例来展示这一点。
- 对 SVG 滤镜及其属性的 CSS 动画支持不佳
- CSS 对矢量对象及其属性的支持非常弱。例如宽度、高度、半径、字母，作为矢量元素。 Chrome 已经真正开始支持它了，但并不是所有的浏览器都支持它。
使用下面的示例，我们将考虑动画逻辑 SMIL VS CSS Animation
的组织差异
所有 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,-5 M0,16 c4,4 -4,4 0,0;
M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,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 中制作逼真的动画是多么容易
<!-- -->
<svg width="600" height="400" viewBox="100 100 400 300">
<path id="pathChain" d="M100,200 C100,100 250,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">Whosebug</text>
<text id="text1" x="200" y="500"
font-size="90">Whosebug</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>
更新
世界地图上的 Whosebug
<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, 29.41,64.39;0, 29.41,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;30, 56.21,64.39;0, 29.41,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, 43.25,51.14;
0, 43.25,51.14;
-30, 43.25,51.14;
0, 43.25,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, 87.71,66.69;0, 87.71,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;30, 114.51,66.69;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, 105.69,52.39;
-10, 105.69,52.39;
10, 105.69,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;30, 144.91,64.39;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;30, 181.01,64.39;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,164.7,51.4;
0,164.7,51.4;
-30,164.7,51.4;
0,164.7,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;30, 210.21,64.39;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;30, 235.91,64.39;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,227.9,51.1;
-10, 227.9,51.1;
10, 227.9,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;30, 272.11,64.39;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;30, 310.51,64.39;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,293.5,51.3;
0,293.5,51.3;
-30, 293.5,51.3;
0, 293.5,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。引用，以防网站发生变化：
Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.
引自link：
As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
SMIL 不仅可以做一些很棒的事情，而且对 eg 有额外的权力。 CSS 动画，它提供了另一种思考 DOM 动画的方式。我认为即使很少使用它也很有用。一些替代品，例如。 CSS Houdini 已开发多年，无法跨浏览器使用。因此，是否值得，取决于每个人；取决于可用时间。也可以为了好玩而做。关于 JS（非 SMIL）库也可以这样说 Lottie/Bodymovin
TLDR: 我正在尝试确定是否值得花一些时间掌握 SMIL。官方说法（至少来自 Blink，但可能不是来自 Gecko）似乎是这种动画技术 在功能上已被弃用 ... 但实际情况表明这不是完全没有。
我 会 喜欢学习 SMIL，因为它给我留下了深刻的印象，因为它是一种优雅的技术 - 但我不想今年花几个月的时间学习一些会过时的东西一两年后。
问题： 是否值得学习SMIL?
几年前，大家一致认为 SVG 的动画语言 SMIL (Synchronized Multimedia集成语言) 将被弃用：
2015 年 4 月，Blink 团队写道：
"We intend to deprecate SMIL animations in favor of CSS animations and Web animations"
Source: https://groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM)
五年半前意图弃用的两个主要原因似乎是：
- "在实现方面，SMIL 显着增加了 Blink 的复杂性"
- “Internet Explorer 不支持 SMIL，这限制了它对关键功能的使用”
滚到 2020 年，Internet Explorer 迷失在时间的迷雾中，MSIE 的继任者 Edge 现在使用 Blink 渲染引擎（与 Chromium、Chrome、Opera、Brave 等）。
Blink 的主要竞争对手，Gecko，also 对 微笑:
最终结果是 SMIL 现在在整个现代浏览器领域得到 强大支持：
那么我们现在在哪里？我们能否安全地忘记 2015 年的弃用意向并在 SMIL 回来并继续存在的基础上工作？
提议的重复问题及其答案为 Blink 最初宣布打算弃用 SMIL 以及后来宣布打算暂停弃用 SMIL（稍后将恢复）提供了很好的参考。但讨论是从 2016 年开始的。这个问题并没有考虑到 2020 年 SMIL 的拥护者是否可能（？）已经悄然占上风，尽管没有官方的澄清，但可能不再有任何坚决反对 SMIL 的意图。 （例如，Gecko 似乎从未有过反对 SMIL 的热情，是吗？）
trying to establish whether it's worth spending some time mastering SMIL. The official line appears to be that this animation technology is functionally deprecated... but the reality on the ground suggests this isn't the case at all.
在我看来当然值得掌握 SMIL。
原因很多，值得学习：
- SMIL 是用它开发的原生 SVG 框架
- CSS SVG 动画仍然无法复制 SMIL 的所有丰富功能
我将尝试通过具体示例来展示这一点。 - 对 SVG 滤镜及其属性的 CSS 动画支持不佳
- CSS 对矢量对象及其属性的支持非常弱。例如宽度、高度、半径、字母，作为矢量元素。 Chrome 已经真正开始支持它了，但并不是所有的浏览器都支持它。
使用下面的示例，我们将考虑动画逻辑 SMIL VS CSS Animation
的组织差异所有 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,-5 M0,16 c4,4 -4,4 0,0;
M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,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 中制作逼真的动画是多么容易
<!-- -->
<svg width="600" height="400" viewBox="100 100 400 300">
<path id="pathChain" d="M100,200 C100,100 250,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">Whosebug</text>
<text id="text1" x="200" y="500"
font-size="90">Whosebug</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>
更新
世界地图上的 Whosebug
<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, 29.41,64.39;0, 29.41,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;30, 56.21,64.39;0, 29.41,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, 43.25,51.14;
0, 43.25,51.14;
-30, 43.25,51.14;
0, 43.25,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, 87.71,66.69;0, 87.71,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;30, 114.51,66.69;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, 105.69,52.39;
-10, 105.69,52.39;
10, 105.69,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;30, 144.91,64.39;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;30, 181.01,64.39;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,164.7,51.4;
0,164.7,51.4;
-30,164.7,51.4;
0,164.7,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;30, 210.21,64.39;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;30, 235.91,64.39;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,227.9,51.1;
-10, 227.9,51.1;
10, 227.9,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;30, 272.11,64.39;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;30, 310.51,64.39;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,293.5,51.3;
0,293.5,51.3;
-30, 293.5,51.3;
0, 293.5,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。引用，以防网站发生变化：
Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.
引自link：
As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
SMIL 不仅可以做一些很棒的事情，而且对 eg 有额外的权力。 CSS 动画，它提供了另一种思考 DOM 动画的方式。我认为即使很少使用它也很有用。一些替代品，例如。 CSS Houdini 已开发多年，无法跨浏览器使用。因此，是否值得，取决于每个人；取决于可用时间。也可以为了好玩而做。关于 JS（非 SMIL）库也可以这样说 Lottie/Bodymovin