SVG kann Transformationen wie diese durchführen
%Vor%Auch wenn dieses Attribut von Javascript manipuliert wird, bewegt sich SVG zum neuen Punkt. (oder Skala usw.)
Ich habe mich gefragt, ob es möglich ist, einen Ereignis-Listener zu setzen, der jedes Mal ausgeführt wird, wenn ein SVG-Objekt im Dokument geändert wird. Dies ist eher eine Frage des Konzepts, wie Browser alle SVG-Elemente abfragen und gibt es eine gute Möglichkeit, diese Veränderung abzufangen.
Ich habe versucht, meine Hausaufgaben zu verstehen, wie SVGs funktionieren und es scheint, als hätten sie eine Transformationsmatrix, auf die über das DOM zugegriffen werden kann. Die Frage ist, woher weiß der Browser, wann er diese Änderung vornehmen soll.
Referenzen:
Kurz gesagt, gibt es einen Event-Listener in Javascript, der so gebaut werden kann, dass er auf Änderungen von SVGs in general
hörtSie können einen Mutationsbeobachter verwenden, um DOM-Änderungen anzuhören. Dies wird jedoch nicht auf SMIL-Änderungen reagieren, sondern nur auf Attribut- und Elementänderungen.
Mutationsereignisse können mehrere DOM-Änderungen enthalten, da sie asynchron gesendet werden.
Das ist eine sehr gute Frage, für mich ist SVG wie ein Frankenstein, aber auf eine gute Art und Weise kann man SVG mit DOM, CSS oder Javascript animieren und wird heutzutage sehr unterstützt. Dieser Satz im W3 ist relevant:
[...] Nach der ersten Modifikation wird das Objekt live, so dass alle Änderungen an dem entsprechenden Attribut vorgenommen werden sofort im Objekt reflektiert.
Das SVG-DOM baut auf DOM-Elementen auf und ist damit kompatibel, so dass Sie alle Event-Listener, die Sie normalerweise mit dem DOM verwenden (click, hover, load ..), verwenden können. Abgesehen davon denke ich, dass diese 3 wichtiger sind:
beginEvent : Tritt auf, wenn ein Animationselement beginnt. Einzelheiten finden Sie in der Beschreibung von Interface TimeEvent in der SMIL-Animationsspezifikation.
endEvent : Tritt auf, wenn ein Animationselement endet. Einzelheiten finden Sie in der Beschreibung von Interface TimeEvent in der SMIL-Animationsspezifikation.
repeatEvent : Tritt auf, wenn ein Animationselement wiederholt wird. Es wird jedes Mal nach der ersten Iteration ausgelöst, wenn das Element wiederholt wird. Einzelheiten finden Sie in der Beschreibung von Interface TimeEvent in der SMIL-Animationsspezifikation.
Vollständige Liste der unterstützten Ereignisse
Wenn Sie mehr als das brauchen, ist mein Rat, das SMIL-Animationsmodell zu überprüfen
Nach meinem Wissen gibt es keine Standardmethode, auf die direkte Manipulation eines DOM-Attributs zu warten (obwohl Sie es über können Sie mit D3 auf das Ende davon hören.
Tags und Links javascript html svg d3.js