JavaScript listener di eventi per SVG trasformare

Question

SVG può eseguire trasformazioni in questo modo

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

Inoltre, ogni volta che questo attributo viene manipolata da JavaScript per esempio SVG si sposterà il nuovo punto. (o scala ecc.)

Mi chiedevo se fosse possibile impostare un listener di eventi che viene eseguito ogni volta che viene modificato qualsiasi oggetto SVG nel documento. Questa è più una questione concettuale su come i browser continuano a interrogare tutti gli elementi SVG e c'è un modo piacevole per intercettare quel cambiamento.

Ho provato a fare i compiti per capire come funzionano gli SVG e sembra che abbiano una matrice di trasformazione a cui è possibile accedere tramite DOM. La domanda è come fa il browser a sapere quando apportare quel cambiamento.

Riferimenti:

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/

In breve, c'è un listener di eventi in JavaScript che può essere costruito ad ascoltare per le modifiche di SVG di in genereal

Answer 1

È possibile utilizzare un mutation observer per ascoltare le modifiche DOM. Tuttavia, questo non reagirà alle modifiche SMIL, solo all'attributo e alle modifiche degli elementi.

Gli eventi di mutazione possono contenere più modifiche DOM in quanto vengono inviate in modo asincrono.

Answer 2

Per quanto ne so, c'è Non c'è un modo standard per ascoltare la manipolazione diretta di un attributo DOM (sebbene tu possa prenderlo tramite transitions se fosse l'attributo style/CSS). Gli eventi nascono dall'interazione tra l'utente e il browser (pensa clic, ridimensiona, passa il mouse, ecc.). La modifica diretta di un attributo non è qualcosa che un utente normale farebbe mai.

Se si desidera allegare i listener di eventi a un SVG che cambia, sarebbe meglio ascoltare l'evento di interazione dell'utente che sta causando la modifica o qualsiasi altra cosa nel codice sta causando la modifica. Se si dispone di un'animazione/transizione in esecuzione dopo l'interazione, che è necessario ascoltare per la fine di, you can listen for the end of that using D3.

Answer 3

Questa è una domanda molto buona, per me SVG è come un Frankenstein ma in un buon modo, puoi animare SVG usando il DOM, CSS o Javascript ed è ampiamente supportato in questi giorni. Questa frase in the W3 è rilevante:

[...] Dopo la prima modifica l'oggetto diventa vivo, tale che eventuali modifiche apportate al corrispondente attributo sono immediatamente riflessa nell'oggetto.

Il DOM SVG si basa su ed è compatibile con gli elementi DOM, quindi è possibile avere tutti i listener di eventi che si utilizzano normalmente con il DOM (fare clic, passare con il mouse, caricare ..). A parte questo, penso che il più importante sia questo 3:

beginEvent: si verifica quando inizia un elemento di animazione. Per i dettagli, vedere la descrizione di Interface TimeEvent nella specifica di SMIL Animation.

endEvent: si verifica quando termina un elemento di animazione. Per i dettagli, vedere la descrizione di Interface TimeEvent nella specifica di SMIL Animation.

repeatEvent: si verifica quando si ripete un elemento di animazione. Si alza ogni volta che l'elemento si ripete, dopo la prima iterazione. Per i dettagli, vedere la descrizione di Interface TimeEvent nella specifica di SMIL Animation.

Complete list of supported events

Se avete bisogno di più di questo, allora il mio consiglio è quello di verificare la SMIL Animation Model