Question

在尝试通过HTML按钮开始简单的SVG动画时遇到了障碍。

我不熟悉SMIL动画，但根据建议：

事件值具有以下语法：

事件值:: =（Eventbase-element“。”）？事件符号                           （S（“ +” |“-”）S时钟值）？ Eventbase-element :: = ID

eventbase-element必须是主机中包含的另一个元素   文档。

如果缺少Eventbase元素，则event-base元素为   定义为动画的目标元素

src：https://www.w3.org/TR/2001/REC-smil-animation-20010904/#HyperlinkSemantics

我应该能够定义一个ID为带有动画元素的begin属性的动画开始的触发按钮。以下示例适用于Firefox，但不适用于Chrome或Edge

svg {
  display:block;
  margin:auto;
  width:100px;
  height:100px;
}
button {
  display:block;
  margin:auto;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="rgb(51,51,51)">
    <animate attributeName="fill" from="rgb(89,95,126)" to="rgb(214,166,77)" dur="1s" fill="freeze" begin="animate.click"/>
   </rect>
</svg>

<button id="animate">animate</button>

不幸的是，它没有引发任何错误，所以我不确定问题出在哪里。也许与Chrome的“ SMIL已过时/哦，不是，不是”有关，但我可能做错了。

谢谢您的宝贵时间，我们欢迎您提出任何建议。

Answer 1

这本身不是答案，但是有一篇文章提到：

从理论上讲，事件触发元素可以是其他（非SVG）同一文档中的元素。换句话说，它们可以是HTML 内联SVG的文档中的元素。但这行不通在Chrome中，它仅侦听SVG元素上的这些事件。

src：https://oreillymedia.github.io/Using_SVG/extras/ch19-SMIL

SVG用另一个元素开始SMIL动画

1 个答案: