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

时间:2014-12-25 20:25:30

标签: javascript html svg d3.js

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/
  4. 简而言之,javascript中是否有一个事件监听器,可以构建为监听基因组中SVG的更改

3 个答案:

答案 0 :(得分:5)

您可以使用mutation observer收听DOM更改。这不会对SMIL的变化作出反应,只是属性和元素的变化。

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

答案 1 :(得分:1)

这是一个非常好的问题,对我来说SVG就像一个弗兰肯斯坦,但是以一种好的方式,你可以使用DOM,CSS或Javascript为SVG制作动画,并且在这些日子里得到了广泛的支持。这句话in the W3是相关的:

  

[...]第一次修改后,对象变为现场,   以便对相应属性进行任何修改   立即反映在对象中。

SVG DOM构建在DOM元素之上并与之兼容,因此您可以拥有正常使用DOM的所有事件侦听器(单击,悬停,加载..)。除此之外,我认为更重要的是这3:

beginEvent :在动画元素开始时发生。有关详细信息,请参阅SMIL动画规范中的Interface TimeEvent描述。

endEvent :动画元素结束时发生。有关详细信息,请参阅SMIL动画规范中的Interface TimeEvent描述。

repeatEvent :重复播放动画元素时发生。在第一次迭代后,每次元素重复时都会引发它。有关详细信息,请参阅SMIL动画规范中的Interface TimeEvent描述。

Complete list of supported events

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

答案 2 :(得分:0)

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

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