SVG и HTML с внешним Javascript-файлом

Question

У меня есть HTML-файл с именем index.html, в который я включил svg (используя тег-объект) и js-файл (используя тег script). Функции js работают отлично, когда вызывается внутри HTML-файла. Теперь, когда я хочу получить доступ к одной из моих js-функций внутри svg-файла, мне нужно связать с js-файлом в моем svg-файле (используя xlink). Функции все еще работают внутри файла svg, но как только эти функции относятся к любому элементу в файле HTML (например, document.getElementById ('div1')), они больше не работают (Мое предположение: возможно, потому что функция doesnt найдите элемент внутри HTML, но внутри SVG-файла.) Что я могу сделать, чтобы эти функции снова работали?

Answer 1

Вы можете использовать верхний или родительский объекты для перехода от svg к контейнеру html. Существует svg to container html and container html to svg example with extensive comments here.

Answer 2

Когда вы внедряете JS-функцию в SVG, они всегда выполняются в частной области SVG и, следовательно, не могут получить доступ к чему-либо за ее пределами.

Если вы хотите создать интерактивное веб-приложение с динамическими SVG, вы должны поместить функции JS, которые изменяют SVG в javascript-коде HTML. Вы можете получить доступ к дереву документов SVG из встроенного javascript в HTML, получив .contentDocument элемента <object>.