SVG et HTML avec fichier Javascript externe

Question

J'ai un fichier HTML nommé index.html, dans lequel j'ai inclus un svg (en utilisant l'object-tag) et un fichier js (en utilisant le script-tag). Les fonctions js fonctionnent parfaitement lorsqu'elles sont appelées dans le fichier HTML. Maintenant, quand je veux accéder à l'une de mes fonctions js dans le fichier svg, je dois lier le fichier js dans mon fichier svg (en utilisant xlink). Les fonctions fonctionnent toujours dans le fichier svg, mais dès que ces fonctions font référence à un élément du fichier HTML (par exemple document.getElementById ('div1')), elles ne fonctionnent plus (Ma supposition: Probablement parce que la fonction ne marche pas recherchez l'élément dans le code HTML, mais dans le fichier SVG.) Que puis-je faire pour que ces fonctions fonctionnent à nouveau?

Answer 1

Vous pouvez utiliser les objets supérieurs ou parent pour obtenir du svg au conteneur html. Il y a un svg to container html and container html to svg example with extensive comments here complet.

Answer 2

Lorsque vous intégrez une fonction JS dans un SVG, ils sont toujours exécutés dans le cadre privé du SVG, et ne peut donc accéder à quoi que ce soit en dehors de celui-ci. Lorsque vous voulez créer une application web interactive avec des SVG dynamiques, vous devez mettre les fonctions JS qui modifient le SVG dans le code javascript du HTML. Vous pouvez accéder à une arborescence de documents SVG à partir du javascript incorporé HTML en obtenant le .contentDocument de l'élément <object>.