У меня есть svg файл (карта оборудования), в котором есть ссылки на 3-д модели. Я хочу при клике по ссылке из svg файла открывать новый маршрут и подгружать свою 3-д модель, это работает с одним но - страница полностью перезагружается и дублируются все компоненты - то есть появляется 2 меню, 2 футера. Я считаю, что необходимо каким-то образом перехватить HTML ссылки из svg и переделать их в router-link. Единственное решение, которое смог найти https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html , но у меня не получается его адаптировать и заставить работать.
В шаблоне подключаю svg через тег object
<div class="grid">
<div class="col-12 flex justify-content-center align-items-center princip-plan" @click="clickSVG">
<object type="image/svg+xml" :data="getModelBN800.link"> </object>
</div>
</div>
<script>
export default {
setup() {
onMounted(() => {
})
const modelStore = useModelStore()
const { getModelBN800 } = storeToRefs(modelStore)
const clickSVG = (event) => {
console.log(event)
let target = event
while (target && target.tagName !== 'A') target = target.parentNode
if (target && target.matches(".dynamic-content a:not([href*='://'])") && target.href) {
if (button !== undefined && button !== 0) return
if (target && target.getAttribute) {
const linkTarget = target.getAttribute('target')
if (/\b_blank\b/i.test(linkTarget)) return
}
const url = new URL(target.href)
const to = url.pathname
if (window.location.pathname !== to && event.preventDefault) {
event.preventDefault()
this.$router.push(to)
}
}
}
return { getModelBN800, clickSVG }
}
}
</script>
Сейчас функция clickSVG ни как не реагирует. Если я добавлю стиль pointer-events:none;
к object тогда клик срабатывает, но target.tagName не находит ссылок, а только div на котором повешен клик. Если повесить клик на object, ни каких действий не происходит. Какие есть варианты решения моей задачи?
На основе решения Александра Сычева (ниже в комментариях). Я попытался адаптировать решение для себя и получаю ошибку Cannot read properties of null (reading 'contentDocument')
.
Я создал функцию clickSVG2 и добавил ее в onMounted:
onMounted(() => {
clickSVG2()
})
const clickSVG2 = () => {
window.addEventListener("load", () => {
// const a = ref(null)
// console.log(a.value)
const a = document.getElementById("Plan").contentDocument
const b = a.getElementById("svg4504")
const c = b.querySelectorAll("a")
c.forEach(i => {
i.addEventListener('click', (e) => {
e.preventDefault()
console.log(i)
})
})
});
}
Я добавил id="Plan" в object, а внутри моего svg файла id svg4504. Также я пытался повесить ссылку ref на object, но также безрезультатно. Также я должен сообщить, что не могу разместить svg inline, ибо файл является сложным и в нем 40К строк