SVG转换的Javascript事件侦听器

SVG可以执行这样的转换

<g transform="translate(80,0)">

此外，每当javascript（例如）操纵该属性时，SVG都会移动到新的点。（或比例尺等）

我想知道是否可以设置一个事件监听器，在每次更改文档中的任何SVG对象时运行该监听器。这更多的是一个概念问题，即浏览器如何保持轮询所有SVG元素，以及是否有一种很好的方法来拦截这种更改

我试着做我的家庭作业来理解SVG是如何工作的，看起来它们有一个可以通过DOM访问的转换矩阵。问题是浏览器如何知道何时进行更改

参考资料：

---

简言之，javascript中是否有一个事件监听器可以构建来侦听SVG的一般更改

据我所知，没有标准的方法来侦听DOM属性的直接操作（尽管您可以通过样式属性/CSS捕获它）。事件发生于用户和浏览器之间的交互（思考单击、调整大小、鼠标悬停等）。直接修改属性不是普通用户会做的事情

如果您希望将事件侦听器附加到SVG更改，那么最好侦听导致更改的用户交互事件或代码中导致更改的任何内容。如果在交互之后运行了动画/转换，则需要在结束时监听。

可以使用来监听DOM更改。不过，这不会对SMIL更改做出反应，只会更改属性和元素

---

突变事件可能包含多个DOM更改，因为它们是异步发送的。

这是一个非常好的问题，对我来说，SVG就像弗兰肯斯坦一样，但从一个好的方面来说，您可以使用DOM、CSS或Javascript设置SVG的动画，并且在这些日子里得到了广泛的支持。这句话与：

[…]第一次修改后，对象变为活动对象， 这样，对相应属性所做的任何修改都是 立即反映在物体上

SVG DOM构建在DOM元素的基础上，并且与DOM元素兼容，因此您可以使用DOM通常使用的所有事件侦听器（单击、悬停、加载..）。除此之外，我认为更重要的是这3点：

beginEvent：在动画元素开始时发生。有关详细信息，请参见SMIL动画规范中接口时间事件的描述

endEvent：在动画元素结束时发生。有关详细信息，请参见SMIL动画规范中接口时间事件的描述

repeatEvent：当动画元素重复时发生。在第一次迭代之后，每当元素重复时，它都会被提升。有关详细信息，请参见SMIL动画规范中接口时间事件的描述

---

如果您需要更多信息，那么我的建议是查看

Haha.：-）通过查看D3库，我开始对这一点产生疑问。在设置库的方式中，它使用这些转换而不侦听它们。问题是，如果您以D3方式以外的任何方式更改它（例如在初始化期间），则不会保存状态。我想知道我是否可以通过这样做来改进这个库，这其中一个特别的“问题”就是我所看到的以一种黑客的方式解决的。如果你翻阅D3源代码，有没有办法通过自动将节点的状态合并到其中来解决初始化问题（尽管不是进一步的非D3更改）？我假设您已经尝试过了……实际上，有一种方法可以监听DOM属性的直接操作，即突变观察者，如另一个答案中所述。

+1

提到突变观察者，很有趣thing@torazaburo我说过吗？关于SVG的解释真是太好了。但是yeah@torazaburo：对不起，我的英语不好，但我正在阅读（…）设置一个事件侦听器，该侦听器在每次更改文档中的任何SVG对象时都会运行，并且有多种方法（属性）可以“更改”SVG元素（通过CSS、JS）？