svg - SVG 的 SMIL 是否已弃用、未弃用或...已暂停但最终将被弃用？

Question

TLDR:我正在尝试确定是否值得花一些时间掌握 微笑 .官方的说法(至少来自 Blink，但可能不是来自 Gecko)似乎是这种动画技术在功能上已被弃用......但实际情况表明情况并非如此。
我想学习 SMIL，因为它给我的印象是一种优雅的技术——但我不希望今年花几个月的时间来学习一两年后就会过时的东西。
问题:值得学习吗微笑 ?

几年前，共识是 SVG 的动画语言，微笑 (同步多媒体集成语言)将被弃用:
2015年4月，闪烁团队写道:

"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 的继任者 边 ，现在使用 闪烁渲染引擎(与 Chromium 、 Chrome 、 Opera 、 Brave 等一起)。
闪烁的主要竞争对手， 壁虎 , 似乎对 也很满意微笑 :

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

最终结果是 微笑 现在在整个现代浏览器领域都有强大的支持:

https://caniuse.com/svg-smil

那么我们在哪里， 现在 ?我们可以放心地忘记 2015 年的弃用意向，并在 的基础上工作吗？微笑 回来了吗？

提议的重复问题及其答案很好地引用了 Blink 最初宣布它打算弃用 SMIL 以及后来宣布它打算暂停弃用 SMIL(它将在稍后恢复)。但讨论是从 2016 年开始的。问题没有考虑到 2020 年，SMIL 倡导者是否可能(？)悄悄地占了上风，尽管没有官方澄清，但可能不再有任何坚决反对 SMIL 的意图。 (例如，Gecko 似乎从未有过反对 SMIL 的热情，是吗？)

Answer 1

trying to establish whether it's worth spending some time masteringSMIL. The official line appears to be that this animation technologyis functionally deprecated... but the reality on the ground suggeststhis isn't the case at all.

当然，我认为掌握 SMIL 是值得的。
原因很多，值得学习:

SMIL 是用它开发的原生 SVG 框架

SVG 的 CSS 动画仍然无法复制 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="/image/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" > &#128645; </tspan>
<tspan dx="-12">  &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15">   &#128643; </tspan>
<tspan dx="-12">   &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15">   &#128643; </tspan>
<tspan dx="-12">   &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15" >   &#128642; </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,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" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </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="/image/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="/image/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能继续活下去。