Сделать объект html svg также доступным для ссылки

У меня есть объект SVG на моей HTML-странице и обертываю его якорем, поэтому при щелчке изображения svg он берет пользователя на привязку.

<a href="#" onclick="location.href='http://www.google.com/'; return false;">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

Когда я использую этот блок кода, нажатие на объект svg не приводит меня к Google. В IE8 < текст диапазона можно щелкнуть.

Я не хочу изменять свое svg-изображение, чтобы содержать теги.

Мой вопрос: как я могу сделать изображение svg доступным?

Ответ 1

Самый простой способ - не использовать <object> . Вместо этого используйте тег <img> , и якорь должен работать нормально.

Ответ 2

На самом деле, лучший способ решить это... на <object> тег, используйте:

pointer-events: none;

Примечание. Пользователи, у которых установлен плагин Ad Blocker, получают зависящий от табуляции [Блок] в верхнем правом углу при зависании (то же, что и флэш-баннер). По настройкам этот css, который также исчезнет.

http://jsfiddle.net/energee/UL9k9/

Ответ 3

Хотел бы воспользоваться этим, но я нашел решение здесь:

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

добавить в css для привязки следующее:

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

Ссылка работает на svg и на резервную копию.

Ответ 4

У меня была такая же проблема, и мне удалось решить эту проблему:

Обтекание объекта с помощью элемента, установленного для блока или встроенного блока

<a>
    <span>
        <object></object>
    </span>
</a>

Добавление в тег <a>:

display: inline-block;
position: relative; 
z-index: 1;

и тегу <span>:

display: inline-block;

и тегу <object>:

position: relative; 
z-index: -1

См. пример здесь: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Найдено через комментарий 20 здесь https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Ответ 5

Вы также можете вставить что-то подобное внизу SVG (прямо перед закрывающим тегом </svg>):

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

Затем просто исправьте ссылку. Я использовал 100% ширину и высоту, чтобы покрыть SVG, в котором он сидит. Кредит на эту технику распространяется на умных людей на Clearleft.com - там, где я впервые увидел его.

Ответ 6

Упрощение решения Ричарда. Работает как минимум в Firefox, Safari и Opera:

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

См. http://www.noupe.com/tutorial/svg-clickable-71346.html для дополнительных решений.

Ответ 7

Чтобы выполнить это во всех браузерах, вам нужно использовать комбинацию методов @energee, @Richard и @Feuermurmel.

<a href="" style="display: block; z-index: 1;">
    <object data="" style="z-index: -1; pointer-events: none;" />
</a>

Добавление:

pointer-events: none; делает работу в Firefox.
display: block; работает в Chrome и Safari.
z-index: 1; z-index: -1; заставляет его работать и в IE.

Ответ 8

Я решил это, отредактировав файл svg.

Я завернул xml всего изображения svg в теге группы, который имеет событие click следующим образом:

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
 <!-- ... your graphics ... -->
</g>
</svg>

Решение работает во всех браузерах, поддерживающих объект svg script. (по умолчанию тег img внутри вашего элемента объекта для браузеров, которые не поддерживают svg, и вы охватите гамму браузеров)

Ответ 9

Я попробовал этот простой простой метод и, похоже, работает во всех браузерах. Внутри файла svg:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  
<!--your graphic-->
  
</a>
</svg>

Ответ 10

Сделайте это с помощью javascript и добавьте атрибут onClick в свой object -element:

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
    <span>Your browser doesn't support SVG images</span>
</object>