用于 SVG 转换的 Javascript 事件监听器

Posted 2023-02-22

【中文标题】用于 SVG 转换的 Javascript 事件监听器

【英文标题】：Javascript event listener for SVG transform

【发布时间】：2015-02-23 09:00:09

【问题描述】：

SVG 可以像这样执行转换

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

此外，每当此属性由 javascript 操作时，例如 SVG 将移动到新点。 （或规模等）

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

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

参考文献：

http://www.w3.org/TR/SVG/struct.html https://www.dashingd3js.com/svg-group-element-and-d3js http://sarasoueidan.com/blog/svg-transformations/

简而言之，javascript中是否有一个事件监听器可以用来监听一般SVG的变化

【参考方案1】：

这是一个非常好的问题，对我来说 SVG 就像一个科学怪人，但在一个好的方面，您可以使用 DOM、CSS 或 Javascript 为 SVG 制作动画，并且这些天得到了广泛的支持。这句话in the W3是相关的：

[...] 第一次修改后，对象变为活动状态， 这样对相应属性所做的任何修改都是 立即反映在对象中。

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

beginEvent：在动画元素开始时发生。详见 SMIL 动画规范中对接口 TimeEvent 的描述。

endEvent：在动画元素结束时发生。详见 SMIL 动画规范中对接口 TimeEvent 的描述。

repeatEvent：在动画元素重复时发生。在第一次迭代之后，每次元素重复时都会引发它。详见 SMIL 动画规范中对接口 TimeEvent 的描述。

Complete list of supported events

如果您需要更多，那么我的建议是查看SMIL Animation Model

【讨论】：

@torazaburo 我说了吗？

感谢关于 SVG 的解释。但是是的

@torazaburo：对不起我的英语，但我正在阅读 (...) 设置一个事件侦听器，每次更改文档中的任何 SVG 对象时都会运行，并且有不止一种方式（属性）来“改变”一个 SVG 元素（通过 CSS、JS）？

【参考方案2】：

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

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

【讨论】：

+1 提到突变观察者，有趣的事情

【参考方案3】：

据我所知，没有标准的方法来监听对 DOM 属性的直接操作（如果它是样式属性/CSS，您可以通过 transitions 捕获它）。事件来自用户和浏览器之间的交互（想想点击、调整大小、鼠标悬停等）。直接修改属性不是普通用户会做的事情。

如果您想将事件侦听器附加到 SVG 更改，最好侦听导致更改的用户交互事件或代码中导致更改发生的任何内容。如果您在交互后运行动画/过渡，您需要在结束时收听，you can listen for the end of that using D3。

【讨论】：

哈哈。 :-) 通过查看 D3 库，我开始对此感到疑惑。图书馆的设置方式，它利用这些转换而不听它们。问题在于，如果您以 D3 方式以外的任何方式更改它（例如在初始化期间），则不会保存状态。我想知道我是否可以通过这样做来改进图书馆

这导致的一个特殊“问题”是***.com/questions/27570565/…，它以一种骇人听闻的方式解决了

哦，我明白了。好吧，如果您在 D3 源代码中四处寻找，是否可以通过自动将节点的状态合并到 this.__chart__ 中来解决初始化问题（尽管不是进一步的非 D3 更改）？我假设你已经尝试过了……

实际上有一种方法可以监听对DOM属性的直接操作，即变异观察者，如另一个答案所述。