SVG <animate>在Safari生效但Chrome失效的问题排查

我知道Chrome支持SMIL动画，但我的SVG SMIL动画在Chrome 107版本里无法运行，却能在Safari 16.0正常工作。相关代码如下：

<svg width="46" height="62" viewBox="0 0 46 62" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z" id="shape" fill="#007AFF" stroke="white" stroke-width="4">
     <animate          
      attributename="d"
      begin="G.click"
      from="M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
      to="M 23 2 C 29.018 2 34.385 4.034 38.179 7.421 C 41.794 10.647 44 15.131 44 20.365 C 44 22.74 43.043 26.026 41.334 29.89 C 39.649 33.7 37.33 37.861 34.818 41.916 C 30.621 48.692 25.957 55.057 22.998 58.816 C 20.041 55.06 15.379 48.7 11.182 41.928 C 8.671 37.873 6.351 33.712 4.666 29.901 C 2.958 26.036 2 22.746 2 20.365 C 2 15.119 4.203 10.637 7.812 7.416 C 11.606 4.029 16.976 2 23 2 Z" 
      dur=".4s" 
    />
  </path>
</svg>

问题原因 #

• 属性大小写错误：SMIL规范要求animate元素的属性名采用驼峰式写法attributeName，但代码里写成了全小写的attributename。Chrome严格遵循XML属性名大小写敏感的规则，会忽略这个错误的属性；而Safari对大小写不敏感，能正常识别并执行动画。
• 触发目标不存在：begin="G.click"指定点击ID为G的元素触发动画，但SVG中并没有这个ID的元素。Chrome找不到触发源，动画无法启动；Safari则存在容错机制，自动触发或忽略该错误，因此动画能运行。

修复方案 #

1. 将attributename改为标准的attributeName；
2. 修正begin属性的触发目标，比如改为点击path本身（path的ID是shape，所以写成begin="shape.click"）。

修复后的代码：

<svg width="46" height="62" viewBox="0 0 46 62" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z" id="shape" fill="#007AFF" stroke="white" stroke-width="4">
     <animate          
      attributeName="d"
      begin="shape.click"
      from="M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
      to="M 23 2 C 29.018 2 34.385 4.034 38.179 7.421 C 41.794 10.647 44 15.131 44 20.365 C 44 22.74 43.043 26.026 41.334 29.89 C 39.649 33.7 37.33 37.861 34.818 41.916 C 30.621 48.692 25.957 55.057 22.998 58.816 C 20.041 55.06 15.379 48.7 11.182 41.928 C 8.671 37.873 6.351 33.712 4.666 29.901 C 2.958 26.036 2 22.746 2 20.365 C 2 15.119 4.203 10.637 7.812 7.416 C 11.606 4.029 16.976 2 23 2 Z" 
      dur=".4s" 
    />
  </path>
</svg>

内容的提问来源于stack exchange，提问作者Nick Bewley