Javascript event listener for SVG conversion
SVG can perform such conversions
<g transform="translate(80,0)"> Also, whenever this attribute is processed by javascript, for example, SVG will move to a new point. (or scale, etc.)
I was wondering if it is possible to install an event listener that fires every time when any SVG object in the document changes. This is more of a conceptual question about how browsers poll all SVG elements and there is a good way to catch this change.
I tried to do my homework, understanding how SVG works, and it looks like they have a transformation matrix that can be accessed through the DOM. The question is how does the browser know when to do this.
References:
- http://www.w3.org/TR/SVG/struct.html
- https://www.dashingd3js.com/svg-group-element-and-d3js
- http://sarasoueidan.com/blog/svg-transformations/
In short, is there an event listener in javascript that can be created to listen for SVG changes in genereal
You can use the mutational observer to listen for DOM changes. This will not respond to SMIL changes, but only changes to attributes and elements.
Mutation events may contain several DOM changes as they are dispatched asynchronously.
This is a very good question, for me SVG is similar to Frankenstein, but in a good way you can animate SVG with DOM, CSS or Javascript and is widely supported these days. This sentence in W3 matters:
[...] After the first modification, the object becomes live, so that any changes made to the corresponding attribute are immediately reflected in the object.
The SVG DOM is based and compatible with DOM elements, so you can use all the event listeners that you usually use with the DOM (click, hang, load ..). Also, I think the more important is 3:
beginEvent : Occurs when an animated element begins. See the TimeEvent interface description in the SMIL Animation specification for details.
endEvent . Occurs when the animation element completes. See the TimeEvent interface description in the SMIL Animation specification for details.
repeatEvent . Occurs when an animation element is repeated. It rises every time an element repeats after the first iteration. See the TimeEvent interface description in the SMIL Animation specification for details.
If you need more, then my advice is to check out the SMIL Animation Model
As far as I know, there is no standard way to listen for direct manipulation of the DOM attribute (although you could catch it through transitions if it is a style / CSS attribute). Events arise due to the interaction between the user and the browser (I think, click, resize, hover, etc.). Direct modification of an attribute is not something ordinary user.
If you want to connect event listeners to an SVG change, it would be better to listen to a user interaction event that causes the change or something else in your code causes the change. If after the interaction you perform an animation / transition that you want to listen to at the end, you can listen to it using D3 .