我的理解是,SMIL动画是由Chrome支持的;然而,我的SVG SMIL动画does not在Chrome(V107)中运行,而它does在Safari(v16.0)中运行
以下是对一位编码员的link分,用来说明这个问题.为什么这个<animation>
不能跨浏览器运行?
<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>