сделайте html 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 кликабельным?
10 ответов
на самом деле, лучший способ решить это... в теге
pointer-events: none;
Примечание: пользователи, которые имеют плагин Ad Blocker установлен получить вкладку, как [блок] в правом верхнем углу при наведении (так же, как Флэш-баннер получает). По настройкам этого css, это тоже исчезнет.
хотел бы взять на себя ответственность за это, но я нашел решение здесь:
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 и на резервном.
у меня была такая же проблема и удалось решить это:
обертывание объекта элементом, установленным в block или inline-block
<a>
<span>
<object></object>
</span>
</a>
добавлять к <a>
tag:
display: inline-block;
position: relative;
z-index: 1;
и <span>
tag:
display: inline-block;
и <object>
tag:
position: relative;
z-index: -1
см. пример здесь:http://dabblet.com/gist/d6ebc6c14bd68a4b06a6
найдено через комментарий 20 здесь https://bugzilla.mozilla.org/show_bug.cgi?id=294932
вы также можете вставить что-то подобное в нижней части вашего SVG (прямо перед закрытием </svg>
tag):
<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 в тег группы, который имеет событие click следующим образом:
<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
<!-- ... your graphics ... -->
</g>
</svg>
решение работает во всех браузерах, поддерживающих скрипт object svg. (по умолчанию тег img внутри элемента объекта для браузеров, которые не поддерживают svg, и вы будете охватывать гамму браузеров)
Я пробовал этот чистый простой метод и, похоже, работает во всех браузерах. Внутри файла svg:
<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
<!--your graphic-->
</a>
</svg>
сделайте это с помощью 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>