membuat objek html svg juga merupakan tautan yang dapat diklik

Saya memiliki objek SVG di halaman HTML saya dan saya membungkusnya dengan jangkar sehingga ketika gambar svg diklik, pengguna akan diarahkan ke tautan jangkar.

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

Ketika saya menggunakan blok kode ini, mengklik objek svg tidak membawa saya ke google. Di IE8 <teks rentang dapat diklik.

Saya tidak ingin mengubah gambar svg saya mengandung tag.

Pertanyaan saya adalah, bagaimana saya bisa membuat gambar svg dapat diklik?

Cara termudah adalah tidak menggunakan <object>. Alih-alih menggunakan tag <img> dan jangkar akan bekerja dengan baik.

Sebenarnya, cara terbaik untuk menyelesaikan ini adalah ... pada tag <object>, gunakan:

pointer-events: none;

Catatan: Pengguna yang memasang plugin Ad Blocker mendapatkan [Block] seperti tab di sudut kanan atas saat melayang (sama seperti yang didapat oleh spanduk flash). Dengan mengatur css ini, itu akan hilang juga.

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

Saya memiliki masalah yang sama dan berhasil menyelesaikannya dengan:

Membungkus objek dengan elemen yang diatur ke blok atau inline-block

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

Menambahkan ke <a>tag:

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

dan ke <span>tag:

display: inline-block;

dan ke <object>tag:

position: relative; 
z-index: -1

Lihat contoh di sini: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Ditemukan melalui komentar 20 di sini https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Ingin mengambil kredit untuk ini, tetapi saya menemukan solusinya di sini:

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

tambahkan berikut ini ke css untuk jangkar:

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>

Tautan berfungsi pada svg dan pada fallback.

Anda juga bisa menempelkan sesuatu seperti ini di bagian bawah SVG Anda (tepat sebelum </svg>tag penutup ):

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

Kemudian ubah tautannya agar sesuai. Saya telah menggunakan lebar dan tinggi 100% untuk menutupi SVG tempatnya. Kredit untuk teknik ini diberikan kepada orang-orang pintar di Clearleft.com - di situlah saya pertama kali melihatnya menggunakannya.

Penyederhanaan solusi Richard. Paling tidak berfungsi di Firefox, Safari dan Opera:

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

Lihat http://www.noupe.com/tutorial/svg-clickable-71346.html untuk solusi tambahan.

Untuk melakukannya di semua browser, Anda perlu menggunakan kombinasi metode @energee, @Richard, dan @Feuermurmel.

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

Menambahkan:

• pointer-events: none; membuatnya bekerja di Firefox.
• display: block; membuatnya berfungsi di Chrome, dan Safari.
• z-index: 1; z-index: -1; membuatnya bekerja di IE juga.

Saya menyelesaikan ini dengan mengedit file svg juga.

Saya membungkus xml grafik svg keseluruhan dalam tag grup yang memiliki acara klik sebagai berikut:

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

Solusi bekerja di semua browser yang mendukung skrip objek svg. (default tag img di dalam elemen objek Anda untuk browser yang tidak mendukung svg dan Anda akan menutupi keseluruhan browser)

Saya mencoba metode mudah bersih ini dan tampaknya berfungsi di semua browser. Di dalam file svg:

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

Hanya saja, jangan gunakan <object>. Inilah solusi yang berfungsi untuk saya <a>dan <svg>tag:

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

Lakukan dengan javascript dan tambahkan onClick-atribut ke elemen-Anda 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>