SVG can perform transformations like so
SVG可以执行这样的转换
<g transform="translate(80,0)">
Also, whenever this attribute is manipulated by javascript for example the SVG will move to the new point. (or scale etc.)
此外，每当javascript操纵此属性时，SVG将移动到新点。 （或规模等）
I was wondering whether it was possible to set an event listener that runs each time any SVG object in the document is changed. This is more of a concept question of how do browsers keep polling all the SVG elements and is there a nice way to intercept that change.
我想知道是否可以设置每次更改文档中的任何SVG对象时运行的事件侦听器。这更像是一个概念问题，即浏览器如何继续轮询所有SVG元素，并且有一种很好的方法来拦截这种变化。
I tried doing my homework understanding how SVGs work and it seems like they have a transformation matrix that can be accessed via the DOM. The question is how does the browser know when to make that change.
我尝试做家庭作业，了解SVG是如何工作的，看起来他们有一个可以通过DOM访问的转换矩阵。问题是浏览器如何知道何时进行更改。
References:
参考文献：
- http://www.w3.org/TR/SVG/struct.html
- http://www.w3.org/TR/SVG/struct.html
- https://www.dashingd3js.com/svg-group-element-and-d3js
- https://www.dashingd3js.com/svg-group-element-and-d3js
- http://sarasoueidan.com/blog/svg-transformations/
- http://sarasoueidan.com/blog/svg-transformations/
In short, is there an event listener in javascript that can be built to listen for changes of SVG's in genereal
简而言之，是否存在javascript中的事件监听器，可以构建为侦听SVG在genereal中的更改
3 个解决方案
#1
5
You can use a mutation observer to listen to DOM changes. This won't react to SMIL changes though, just attribute and element changes.
您可以使用变异观察器来监听DOM更改。这不会对SMIL更改做出反应，只是属性和元素更改。
Mutation events may contain multiple DOM changes as they are sent asynchronously.
突变事件可能包含多个DOM更改，因为它们是异步发送的。
#2
1
This is a very good question, for me SVG is like a Frankenstein but in a good way, you can animate SVG using the DOM, CSS or Javascript and is widely supported on these days. This sentence in the W3 is relevant:
这是一个非常好的问题，对我来说SVG就像一个弗兰肯斯坦，但是在一个好的方面，你可以使用DOM，CSS或Javascript为SVG制作动画，并且在这些日子里得到了广泛的支持。 W3中的这句话是相关的：
[...] After the first modification the object becomes live, such that any modifications made to the corresponding attribute are immediately reflected in the object.
[...]在第一次修改之后，对象变为活动对象，这样对对应属性所做的任何修改都会立即反映在对象中。
The SVG DOM builds upon and is compatible with DOM elements, so you can have all the event listeners you use normally with the DOM (click, hover, load..). Apart of that, I think the more important are this 3:
SVG DOM构建在DOM元素之上并与之兼容，因此您可以使用DOM正常使用的所有事件侦听器（单击，悬停，加载..）。除此之外，我认为更重要的是这3：
beginEvent: Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
beginEvent：动画元素开始时发生。有关详细信息，请参阅SMIL动画规范中的Interface TimeEvent的说明。
endEvent: Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
endEvent：动画元素结束时发生。有关详细信息，请参阅SMIL动画规范中的Interface TimeEvent的说明。
repeatEvent: Occurs when an animation element repeats. It is raised each time the element repeats, after the first iteration. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
repeatEvent：动画元素重复时发生。在第一次迭代之后，每次元素重复时都会引发它。有关详细信息，请参阅SMIL动画规范中的Interface TimeEvent的说明。
Complete list of supported events
完整的受支持事件列表
If you need more than that then my advice is to check the SMIL Animation Model
如果您需要更多，那么我的建议是检查SMIL动画模型
#3
0
To my knowledge, there's no standard way to listen for the direct manipulation of a DOM attribute (though you could catch it via transitions if it was the style attribute/CSS). Events arise from interaction between the user and the browser (think click, resize, mouseover, etc.). Directly modifying an attribute is not something that a normal user would ever do.
据我所知，没有标准的方法来监听DOM属性的直接操作（尽管你可以通过转换来捕获它，如果它是样式属性/ CSS）。事件来自用户和浏览器之间的交互（想想点击，调整大小，鼠标悬停等）。直接修改属性不是普通用户会做的事情。
If you'd like to attach event listeners to a SVG changing, it would be better to listen for the user interaction event which is causing the change or whatever in your code is causing the change to happen. If you have an animation/transition running after the interaction, which you need to listen for the end of, you can listen for the end of that using D3.
如果您想将事件监听器附加到SVG更改，那么最好是监听导致更改的用户交互事件或代码中的任何内容导致更改发生。如果您在交互后运行动画/转换，您需要监听结束，您可以使用D3监听结束。
#1
5
You can use a mutation observer to listen to DOM changes. This won't react to SMIL changes though, just attribute and element changes.
您可以使用变异观察器来监听DOM更改。这不会对SMIL更改做出反应，只是属性和元素更改。
Mutation events may contain multiple DOM changes as they are sent asynchronously.
突变事件可能包含多个DOM更改，因为它们是异步发送的。
#2
1
This is a very good question, for me SVG is like a Frankenstein but in a good way, you can animate SVG using the DOM, CSS or Javascript and is widely supported on these days. This sentence in the W3 is relevant:
这是一个非常好的问题，对我来说SVG就像一个弗兰肯斯坦，但是在一个好的方面，你可以使用DOM，CSS或Javascript为SVG制作动画，并且在这些日子里得到了广泛的支持。 W3中的这句话是相关的：
[...] After the first modification the object becomes live, such that any modifications made to the corresponding attribute are immediately reflected in the object.
[...]在第一次修改之后，对象变为活动对象，这样对对应属性所做的任何修改都会立即反映在对象中。
The SVG DOM builds upon and is compatible with DOM elements, so you can have all the event listeners you use normally with the DOM (click, hover, load..). Apart of that, I think the more important are this 3:
SVG DOM构建在DOM元素之上并与之兼容，因此您可以使用DOM正常使用的所有事件侦听器（单击，悬停，加载..）。除此之外，我认为更重要的是这3：
beginEvent: Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
beginEvent：动画元素开始时发生。有关详细信息，请参阅SMIL动画规范中的Interface TimeEvent的说明。
endEvent: Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
endEvent：动画元素结束时发生。有关详细信息，请参阅SMIL动画规范中的Interface TimeEvent的说明。
repeatEvent: Occurs when an animation element repeats. It is raised each time the element repeats, after the first iteration. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
repeatEvent：动画元素重复时发生。在第一次迭代之后，每次元素重复时都会引发它。有关详细信息，请参阅SMIL动画规范中的Interface TimeEvent的说明。
Complete list of supported events
完整的受支持事件列表
If you need more than that then my advice is to check the SMIL Animation Model
如果您需要更多，那么我的建议是检查SMIL动画模型
#3
0
To my knowledge, there's no standard way to listen for the direct manipulation of a DOM attribute (though you could catch it via transitions if it was the style attribute/CSS). Events arise from interaction between the user and the browser (think click, resize, mouseover, etc.). Directly modifying an attribute is not something that a normal user would ever do.
据我所知，没有标准的方法来监听DOM属性的直接操作（尽管你可以通过转换来捕获它，如果它是样式属性/ CSS）。事件来自用户和浏览器之间的交互（想想点击，调整大小，鼠标悬停等）。直接修改属性不是普通用户会做的事情。
If you'd like to attach event listeners to a SVG changing, it would be better to listen for the user interaction event which is causing the change or whatever in your code is causing the change to happen. If you have an animation/transition running after the interaction, which you need to listen for the end of, you can listen for the end of that using D3.
如果您想将事件监听器附加到SVG更改，那么最好是监听导致更改的用户交互事件或代码中的任何内容导致更改发生。如果您在交互后运行动画/转换，您需要监听结束，您可以使用D3监听结束。