在 SVG 中捕获设置属性事件？答案

【问题标题】：Catch set attribute event in SVG?在 SVG 中捕获设置属性事件？
【发布时间】：2014-08-29 12:23:55
【问题描述】：

我有一个包含文本元素的 SVG 文档。文本是不可见的，通过

变为可见

<set attribute.../>

如果我单击另一个 SVG 元素（称为“播放”的圆圈）。

<svg>
 ...

<circle  id="play" onclick="document.documentElement.unpauseAnimations()" ... />

<text id="ergsum0" fill="#000000" visibility="hidden" x="10" y="385"      font-size="22">Ergebnis = <tspan fill="#FF0000" font-size="22">1</tspan>
<set attributeName="visibility" from="hidden"  to="visible" begin="play.click"  />

 ...
 </svg>

是否可以通过 Java/ECMA 脚本捕获设置属性事件？ IE。如果文本设置为可见，则触发某个事件并触发另一个 (JavaScript) 函数的调用？

我可以通过 JavaScript 设置属性，例如

var target = document.querySelector('#ergsum0'); target.setAttribute('visibility','true');

并且可以通过 MutationObserver 捕捉到这一点，但我想知道是否通过设置属性...

还会触发一些可以捕获的更改事件。

提前致谢

【问题讨论】：

但是为什么不直接使用addEventListener，而不使用<set>元素呢？

标签： javascript jquery svg

【解决方案1】：

<set> 动画在完成时应该发送一个 SMIL endEvent。你可以做这样的事情......

<set attributeName="x" to="0" begin="0s" dur="0.5s" id="a"/>
<set attributeName="fill" attributeType="CSS"
  to="green"
  begin="a.endEvent" dur="4s"/>

或者只是在 javascript 中添加一个 eventListener 来捕获事件。

【讨论】：

您好，感谢您的回答。但是事件的名称是什么？ target.addEventListener('???', function() { /* 改变时做某事*/}, false);