我的理解是,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>

推荐答案

它们显然不处理SVG名称空间之外的元素上的event-value.这应该被认为是一个错误,我打开了BUG 1395274个.

至于解决办法,最明显的办法是使用JS:

document.querySelector("button").addEventListener("click", (evt) => {
  document.querySelector("path animate").beginElement();
});
body {
  background-color: green;
}

svg {
  margin: 0 auto;
}
<svg width="146" height="62" viewBox="0 0 146 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="indefinite"
      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="0.4s" 
    />
  </path>
</svg>
<button>
  start animation
</button>

或者如果你真的不想使用JS,那么你可以通过在你的按钮中插入一个<svg>元素来解决一些问题……但很可能不会这么做.

body {
  background-color: green;
}

svg {
  margin: 0 auto;
}
<svg width="146" height="62" viewBox="0 0 146 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="0.4s" 
    />
  </path>
</svg>
<!-- really just to show how Chrome's bug behave don't do that... -->
<button style="position: relative">
  <svg id=G style="width:100%; height:100%; position:absolute; left:0; top:0;"></svg>
  start animation
</button>

一百零二

Html相关问答推荐

在CSS中不保持圆形图像形状的边框半径属性

禁用与行分开的边框折叠span

为所有必填字段添加所需的占位符文本(Angular Material)

这<;td&>如何溢出<;表>;?

Firefox和Chrome在文字装饰和文字阴影方面的不同优先顺序

单独处理Button:Focus的多行按钮

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

在css中是否可以在遮罩图像中结合线性渐变和径向渐变?

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

(HTML框架标签)点击后目标框架将不再工作

使用 R markdown 在 html 中包含图像

带有伪元素的不规则形状的渐变边框

Cargo 在网格中的排列

如何在没有容器的情况下沿基线将 div 中的元素居中?

使用 TailwindCSS 将徽标放在左上角,将菜单放在右上角

使用 CSS 样式化进度条

所有幻灯片上的 Quarto RevealJS 标题

用 flexbox 和 overflow 覆盖

在 EJS 中将元素放置在彼此下方的列中

如何添加适合我的内容的背景图片?