Как настроить переход по ссылке в svg?

Question

[Сергей Мурзин]

Здравствуйте.
У нас есть файл-svg, который надо вставить на страницу. Файл состоит из нескольких элементов, при нажатие на какой-либо элемент должен происходить переход по ссылке который привязан к этому элементу.
Это должно выглядеть примерно так:

<img class="img" src="img.svg" data-link-1="/link1.html" data-link-2="/link2.html" />

Какие есть идеи?
ps: В проекте используется bootstrap и jquery.

Answer 1

[trushka]

я так понимаю, лучше не через img делать, а если jQuery, то

<div class="img" data-link-1="/link1.html" data-link-2="/link2.html" ></div>

var svg=$('div.img').load("file.svg",  function(){
  $('a:eq(0)', this).attr('xlink:href', $(this).data('link-1'))
  $('a:eq(1)', this).attr('xlink:href', $(this).data('link-2'))
});

Исправил, лучше контейнер сделать какой-нить div, может, даже с inline-block, чтоб размеры и пропорции были те, что прописаны в svg

Comments

[Сергей Мурзин]

Спасибо. Реализовал через тег object.
Но возникла другая проблема, не знаю как проверить загрузился ли контент в object в jquery не нашел такого свойства, но чую что должно быть.

[trushka]

Зачем object? SVG можно вставлять прямо в HTML-код. Вот у нас изначально пустой тэг div.img - контейнер. Мы с помощью jQuery аяксом загружаем в него код из svg-файла, а потом, как только svg загрузится - меняем адреса ссылок на нужные из data-link-1 и data-link-2.
api.jquery.com/load

Answer 2

[Alexej Simakov]

svg.tutorial.aptico.de/grafik_svg/kap5_1.svg

Upd. тогда так
function myFunction(el) {
el.setAttribute("data-link-1", "www.google.com")
}
а в элемент img добавить onclick="myFunction(this);"

Comments

[Сергей Мурзин]

Там ссылки вписаны в сам svg файл.
Надо иметь возможность переопределять ссылки не изменяя svg-файл.

Answer 3

[Максим]

может глупость напишу

<a href=""><img src="file.svg">Перейти куда надо</a>

Comments

[Сергей Мурзин]

Ну да.
Так мы перейдем по одной ссылке указанной в href теге a, оборачивающий img, а надо переходить по ссылке в привязанной к объекту в самом файле.
Сложность в том, что я не могу прописать эти ссылки в файл, они генерируются на странице и должны переопределяться на странице.

[Максим]

Сергей Мурзин: а если типа onClick и dbClick ? или вообще кликабельность указывать не в теге А но через js , как в вашем примере

[Максим]

Сергей Мурзин: вот так например function openUrl (){ список url которых надо открыть}

[Сергей Мурзин]

Я примерно на такое и рассчитываю, как-то реализовать через javascript. Просто надеюсь на наличие уже готовой реализации или плагина.