Добрый вечер,
Постановка проблемы:
Я внедряю внешние SVG из другого домена в страницу, чтобы я мог взаимодействовать с внутренними объектами с помощью моей директивыкод ... анимированные SVG, предоставленные дизайном, не работают в Firefox на странице, но работают в Chrome / Safari (должны поддерживаться как CSS, так и управляемые Javascript - скажем, мы будем обрабатывать только Javascript сейчас).Однако, когда я проверяю сетевой вызов указанного SVG и щелкаю ссылку на svg - SVG, отображаемый на странице, выполняет анимацию (не включенную ни в один мой код).Я не верю, что у меня есть какой-либо CSS, который мог бы мешать - только позиционирование и определение размера SVG.
Как я внедряю SVG:
// Omitted Code - Get SVG as data from http request, store in resp.data
var targ = document.getElementById("id");
var svg = new DOMParser().parseFromString(resp.data, "image/svg+xml");
// I'd tried adoptNode as well, no difference
targ.appendChild(targ.ownerDocument.importNode(svg.documentElement, true)).
Я также использовал innerHTML, чтобыпосмотрите, сработает ли это - это не решило проблему и не должно использоваться по соображениям безопасности.
Почему я внедряю / добавляю SVG в DOM вместо использованиятеги?
- SVG будут динамически загружаться на страницу из решения CMS в другом домене .Большинство браузеров блокируют доступ к documentBody в результате по соображениям безопасности.
- Мне нужен доступ к внутренним элементам SVG, так как только эти элементы будут доступны для нажатия.
- Решение заключается в том,будет общим для нескольких SVG на странице / других страницах - я не делаю одноразовое решение.В связи с этим недопустимо встраивать все сценарии в сам SVG - возвращаясь к моему общему утверждению, поскольку я хочу обрабатывать тегированные элементы определенным образом и разрешать использовать любой SVG.
- I 'Я не должен обрабатывать SVG-анимации - они должны обрабатываться дизайнерами и включаться как часть SVG.
- Мы НЕ собираемся включать SVG-файлы встроенными - они большие и всегда будут исходить от CMS.
- Я держусь подальше от внешних библиотек по соображениям безопасности и загрузки приложений (d3 - это тот, на котором я вижу кучу ответов)
Любая помощь приветствуется!Спасибо!