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

Javascript event listener for SVG transform

本文关键字：事件 侦听器 Javascript SVG 转换 用于      更新时间：2023-09-26

SVG 可以执行这样的转换

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

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

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

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

引用：

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

简而言之，javascript中是否有一个事件侦听器可以构建来侦听genereal中SVG的变化

。

您可以使用突变观察器来侦听 DOM 更改。不过，这不会对 SMIL 更改做出反应，只会对属性和元素更改做出反应。

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

这是一个非常好的问题，对我来说，SVG就像一个弗兰肯斯坦，但以一种好的方式，你可以使用DOM，CSS或Javascript对SVG进行动画处理，并且现在得到了广泛的支持。W3中的这句话是相关的：

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

SVG DOM 建立在 DOM

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

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

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

repeatEvent：在动画元素重复时发生。每次元素重复时，在第一次迭代之后，都会引发它。有关详细信息，请参阅 SMIL 动画规范中的接口时间事件说明。

支持事件的完整列表

如果您需要更多，那么我的建议是检查 SMIL 动画模型

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

如果要将事件侦听器附加到 SVG 更改，最好侦听导致更改的用户交互事件或代码中导致更改发生的任何内容。如果在交互后运行动画/过渡，需要侦听该动画/过渡的结束，则可以使用 D3 侦听该动画/过渡的结束。

相关文章：