зробити об’єкт htg svg також посиланням, яке можна натиснути

Я маю об’єкт SVG на своїй HTML-сторінці і загортаю його у якір, тому при натисканні на зображення SVG користувач переводить користувача на посилання на якір.

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

Коли я використовую цей блок коду, натискання об’єкта svg не переносить мене в Google. У IE8 <текст прольоту можна натискати.

Я не хочу змінювати своє зображення SVG, щоб воно містило теги.

Моє запитання: як я можу зробити зображення SVG натисканням?

Найпростіший спосіб - не використовувати <object>. Замість цього використовуйте тег <img>, і якір повинен працювати чудово.

Насправді, найкращий спосіб вирішити це - у тезі <object> використовуйте:

pointer-events: none;

Примітка. Користувачі, у яких встановлений плагін рекламного блокування, після наведенного курсору наведіть на зразок вкладку [Блок] у верхньому правому куті (те саме, що отримується флеш-банер). Встановивши цей css, він також піде.

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

У мене було те саме питання, і мені вдалося вирішити це:

Обтікання об'єкта елементом, встановленим для блокування або вбудованого блоку

<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

Хочеться взяти на це кредит, але я знайшов рішення тут:

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 та на резервній основі.

Ви також можете вставити щось подібне в нижній частині свого 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 - саме там я вперше побачив, як це використовували.

Спрощення рішення Річарда. Принаймні працює у Firefox, Safari та Opera:

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

Див. Http://www.noupe.com/tutorial/svg-clickable-71346.html для додаткових рішень.

Для цього у всіх браузерах потрібно використовувати комбінацію методів @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.

Я вирішив це, редагуючи також файл SVG.

Я загорнув xml усієї графіки svg у тег групи, який має подію кліку наступним чином:

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

Рішення працює у всіх браузерах, які підтримують скрипт об'єкта svg. (за замовчуванням тег img всередині вашого об'єктного елемента для веб-переглядачів, які не підтримують svg, і ви покриєте гаму браузерів)

Я спробував цей чистий простий метод і, здається, працює у всіх браузерах. Всередині файлу svg:

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

Просто не використовуйте <object>. Ось рішення, яке працювало для мене <a>та <svg>теги:

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
    height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
    2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
    1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
   6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
    </svg>
</a>

Зробіть це за допомогою JavaScript та додайте onClick-атрибут у свій object-елемент:

<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>