uczyń obiekt svg html również klikalnym linkiem


143

Mam obiekt SVG na mojej stronie HTML i zawijam go w kotwicę, więc po kliknięciu obrazu svg użytkownik przenosi się do łącza kotwicy.

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

Kiedy używam tego bloku kodu, kliknięcie obiektu svg nie przenosi mnie do Google. W IE8 <tekst zakresu jest klikalny.

Nie chcę modyfikować mojego obrazu SVG, aby zawierał tagi.

Moje pytanie brzmi: jak mogę sprawić, by obraz SVG był klikalny?

Odpowiedzi:


20

Najłatwiej jest nie używać <object>. Zamiast tego użyj tagu <img>, a kotwica powinna działać dobrze.


1
Znacznik img normalnie trafiłby tam, gdzie znajduje się tag span, aby to z wdziękiem degradować.
Adrian Garner

18
Czy to nie jest pomysł, aby wyświetlić wektor svg, a nie obraz?
Łukasz

7
@ ErikDahlström, ale <img>z odniesieniem do danych svg nie zawsze działa zgodnie z oczekiwaniami, nawet w najnowszej wersji Chrome :( stackoverflow.com/questions/15194870/ ...
dshap

15
Jak wskazał @energee, możesz użyć <object>tagu i dodać znak, point-event: none;aby był klikalny. Zachowuje dostęp do kodu źródłowego svg i pozwala na dynamiczne manipulowanie nim.
Antoine,

1
Używanie a imgnie zawsze jest opcją. W moim przypadku muszę manipulować plikiem SVG, czego nie można; nie można tego poprawnie zrobić za pomocą img, muszę użyć object.
Martijn

216

Właściwie najlepszym sposobem rozwiązania tego problemu jest ... na tagu <object> użyj:

pointer-events: none;

Uwaga: Użytkownicy, którzy mają zainstalowaną wtyczkę Ad Blocker, otrzymują po najechaniu kursorem przycisk [Block] podobny do zakładki (tak samo jak w przypadku banera flash). Dzięki ustawieniom tego CSS, to również zniknie.

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


4
Uwaga: IE nie będzie obsługiwać zdarzeń wskaźnika na zwykłych elementach aż do IE 11, ale już obsługuje je w SVG. Zobacz caniuse.com/pointer-events
webdesserts

9
Wadą tego rozwiązania (a także z noelmcg) jest to, że jeśli twój plik SVG zawiera reguły CSS z selektorem: hover, te reguły przestaną działać. Rozwiązanie zaproponowane przez Bena Frain nie ma tego problemu.
MathieuLescure

6
To powinna być zatwierdzona odpowiedź. Używanie imgz svg sprawia, że ​​nie nadaje się do zmiany wewnętrznych stylów SVG.
cadavre

3
To musi być zatwierdzona odpowiedź! Naprawdę fajnie, dzięki
Daniel Broughan

5
Świetna odpowiedź. Dzięki temu moje stało się uniwersalne w globalnym CSS. object [type * = "svg"] {pointer-events: none}
Gregor Macgregor

40

Miałem ten sam problem i udało mi się go rozwiązać poprzez:

Zawijanie obiektu elementem ustawionym na block lub inline-block

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

Dodawanie do <a>tagu:

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

i do <span>tagu:

display: inline-block;

i do <object>tagu:

position: relative; 
z-index: -1

Zobacz przykład tutaj: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Znalezione przez komentarz 20 tutaj https://bugzilla.mozilla.org/show_bug.cgi?id=294932


1
Przepraszam, zapomniałem display: inline-block / block element do zawijania wokół obiektu
Richard,

1
Najlepsze rozwiązanie tutaj!
Baldráni

jest to najlepsze rozwiązanie tego problemu i działa na wszystkich przeglądarkach
Kalpesh Popat

1
jeśli obraz ma przezroczysty bg, te bity nie są klikalne
sobelito

To zadziałało dla mnie, musiałem też dodać wysokość: 100% do elementów ai span w mojej sytuacji
sk03

32

Chciałbym się za to pochwalić, ale rozwiązanie znalazłem tutaj:

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

dodaj następujące elementy do css dla kotwicy:

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>

Link działa na svg i na kreacji zastępczej.


2
To najłatwiejsze i najbardziej obsługiwane rozwiązanie w opinii
styl typu

3
nadal występuje problem: zdarzenia wskaźnika SVG (animacje) już nie działają (najechanie kursorem myszy, wyprowadzenie wskaźnika myszy, kliknięcie)! Tak jak po prostu używając pointer-events: none w samym obiekcie ...
qdev

26

Możesz również przykleić coś takiego na dole swojego SVG (tuż przed zamykającym </svg>tagiem):

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

Następnie po prostu dostosuj link, aby pasował. Użyłem 100% szerokości i wysokości, aby zakryć plik SVG, w którym się znajduje. Technika ta jest uznana za mądrych ludzi z Clearleft.com - tam po raz pierwszy zobaczyłem, że została użyta.


2
Mam style css z selektorem: hover osadzonym w moim pliku SVG. To jedyne rozwiązanie, które nie dezaktywuje stylu.
MathieuLescure

21

Uproszczenie rozwiązania Richarda. Działa przynajmniej w Firefox, Safari i Opera:

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

Dodatkowe rozwiązania można znaleźć pod adresem http://www.noupe.com/tutorial/svg-clickable-71346.html .


3
Dzięki, potrzebowałem wyświetlacza ustawionego na rodzica blocklub inline-blockna niego <a>.
element119

Dobry link: noupe.com/inspiration/tutorials-inspiration/… ma wady i zalety każdego rozwiązania.
Serge Stroobandt

Musiałem też użyć inline-blockw niektórych przypadkach, ale blockwydawało się, że działa dobrze w innych przypadkach; Myślę, że to zależy od otaczających bloków ...
Gwyneth Llewelyn

9

Aby to osiągnąć we wszystkich przeglądarkach, musisz użyć kombinacji metod @energee, @Richard i @Feuermurmel.

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

Dodanie:

  • pointer-events: none; sprawia, że ​​działa w przeglądarce Firefox.
  • display: block; sprawia, że ​​działa w Chrome i Safari.
  • z-index: 1; z-index: -1; sprawia, że ​​działa również w IE.

@janaspage Nie jestem pewien ... Nie wypróbowałem tego w IE 10. Daj mi znać, czy to działa :)
ChristopherStrydom

@jaepage To nie powinno mieć znaczenia, ponieważ objectbędzie teraz znajdował się w niższym kontekście stosu (pod) niż jego rodzic.
Jason T Featheringham

czy to działa na iPhonie / telefonie komórkowym? nie dla mnie. nie klikalne /
niewymagalne

3

Rozwiązałem to również edytując plik SVG.

Umieściłem XML całej grafiki SVG w tagu grupy, który zawiera zdarzenie kliknięcia w następujący sposób:

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

Rozwiązanie działa we wszystkich przeglądarkach obsługujących skrypt obiektowy svg. (domyślnie tag img w elemencie object w przypadku przeglądarek, które nie obsługują formatu svg, pokryjesz całą gamę przeglądarek)


Czy zauważyłeś, że dodanie onclick do zewnętrznego <svg>elementu i nie zawijanie go wcale nie działało?
Robert Longson,

1
Możesz również użyć zdarzeń głównego elementu svg. Oprócz zdarzeń onclick używam onmouseout, ontouchstart, ontouchend itp ... a jako element root svg często używam zdarzenia onload. Rozwiązanie Ben Frain poniżej polega na rysowaniu dodatkowego obiektu okładki (prostokąta), aby uchwycić zdarzenia kliknięcia ... więc zaproponowałem to rozwiązanie pokazujące pobieranie zdarzeń na samych elementach rysunku bez konieczności tworzenia przezroczystej okładki tylko po to, aby uzyskać zdarzenie kliknięcia. Jest to szczególnie przydatne, gdy nie chcesz rysować innego elementu lub chcesz, aby zdarzenia były specyficzne dla istniejącego kształtu, a nie prostokąta.
Bruce Pezzlo,

3

Wypróbowałem tę czystą, łatwą metodę i wydaje się, że działa we wszystkich przeglądarkach. Wewnątrz pliku svg:

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


Następująca przestrzeń nazw „xlink” będzie musiała zostać dodana do elementu svg, aby to zadziałało: xmlns: xlink = " w3.org/1999/xlink "
Mere Development

Żadne z innych rozwiązań nie zadziałało, ale to zadziałało, uff, dziękuję!
ByteMyPixel

Chociaż zwykle nie mam żadnych skrupułów, jeśli chodzi o bezpośrednią zmianę pliku SVG, w moim scenariuszu używam tego samego SVG dla kilku różnych linków - co oznacza, że ​​teoretycznie musiałbym utworzyć inny plik SVG dla każdego. Ewentualnie mógłbym oczywiście dodać wbudowany bit graficzny w tagu <svg>, ale nie znoszę duplikatu kodu (mimo że rzeczywisty SVG, który mam jest mały ...)
Gwyneth Llewelyn

0

Po prostu nie używaj <object>. Oto rozwiązanie, które działało w moim przypadku z tagami <a>i <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>

btw używam tailwind css.
Ege Hurturk

-5

Zrób to za pomocą javascript i dodaj onClick-attribute do swojego object-elementu:

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

Próbowałem tego zarówno z otaczającymi tagami <a>, jak i bez nich, i nie mogę tego uruchomić. Próbowałem w FF i Chrome w systemie Linux. W której przeglądarce to wypróbowałeś?
iancoleman,

6
Byłoby wspaniale, gdybyś mógł spróbować i potwierdzić, że działa, aby inni, którzy to czytają, mogli być pewni Twojej odpowiedzi. „To musi działać” jest w teorii w porządku, ale dla mnie musi działać w praktyce.
iancoleman,

Właśnie wypróbowałem to w Chrome 45 w systemie Windows i wydaje się, że działa dobrze. Dodałem onClick bezpośrednio do tagu SVG bez kotwicy zawijającej. Byłoby miło, gdyby głosy przeciwne wyjaśniały dlaczego.
Chase
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.