membuat objek html svg juga merupakan tautan yang dapat diklik


143

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?

Jawaban:


20

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


1
Tag img biasanya pergi ke mana tag span adalah untuk ini menurunkan anggun.
Adrian Garner

18
Bukankah ide untuk menampilkan vektor svg, bukan gambar?
Lukas

7
@ ErikDahlström tetapi <img>dengan referensi ke data svg tidak selalu berfungsi seperti yang Anda harapkan, bahkan di versi terbaru Chrome :( stackoverflow.com/questions/15194870/…
dshap

15
Seperti yang ditunjukkan oleh @energee, Anda dapat menggunakan <object>tag dan menambahkannya point-event: none;agar dapat diklik. Ini menjaga akses ke kode sumber svg Anda dan memungkinkan Anda untuk memanipulasinya secara dinamis.
Antoine

1
Menggunakan imgopsi tidak selalu merupakan pilihan. Dalam kasus saya, saya perlu memanipulasi svg, yang tidak dapat dilakukan dengan benar img, saya harus menggunakan object.
Martijn

216

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/


4
Catatan: IE tidak akan mendukung pointer-events pada elemen reguler hingga IE 11, tetapi sudah mendukungnya di SVG. Lihat caniuse.com/pointer-events
webdesserts

9
Kelemahan dari solusi ini (dan yang berasal dari noelmcg juga) adalah jika file SVG Anda berisi aturan CSS dengan pemilih hover, aturan-aturan ini akan berhenti berfungsi. Solusi yang diusulkan oleh Ben Frain tidak memiliki masalah ini.
MathieuLescure

6
Ini harus disetujui. Menggunakan imgdengan svg membuat tidak dapat digunakan untuk mengubah gaya SVG internal.
cadavre

3
Ini perlu jawaban yang disetujui! Sangat bagus, terima kasih
Daniel Broughan

5
Jawaban yang bagus Saya menjadikan milik saya universal dengan ini di css global. object [type * = "svg"] {pointer-events: none}
Gregor Macgregor

40

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


1
Permintaan maaf, lupa tampilan: inline-blok / blok elemen untuk membungkus objek
Richard

1
Solusi terbaik di sini!
Baldráni

ini adalah solusi terbaik untuk masalah ini dan berfungsi di semua browser
Kalpesh Popat

1
jika gambar memiliki bg transparan maka bit-bit itu tidak tampak dapat diklik
sobelito

Ini bekerja untuk saya, saya juga harus menambahkan tinggi: 100% ke elemen a dan span dalam situasi saya
sk03

32

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.


2
Ini adalah solusi termudah dan paling didukung dalam opini
Tipe-Gaya

3
ini masih memiliki masalah: Acara pointer SVG (animasi) tidak berfungsi lagi (mouseover, mouseout, klik)! Seperti halnya menggunakan pointer-events: tidak ada pada objek itu sendiri ...
qdev

26

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.


2
Saya memiliki gaya css dengan pemilih hover yang tertanam di file SVG saya. Ini adalah satu-satunya solusi yang tidak menonaktifkan gaya.
MathieuLescure

21

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.


3
Terima kasih, saya perlu tampilan diatur ke blockatau inline-blockpada induknya <a>.
element119

Tautan yang baik: noupe.com/inspiration/tutorials-inspiration/… memiliki pro dan kontra untuk setiap solusi.
Serge Stroobandt

Saya juga perlu menggunakan inline-blockdalam beberapa kasus, tetapi blocktampaknya bekerja dengan baik pada kasus-kasus lain; Saya kira itu tergantung pada blok terlampir ...
Gwyneth Llewelyn

9

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.

@ janaspage Saya tidak yakin ... Saya belum mencobanya di IE 10. Biarkan saya tahu jika itu bekerja :)
ChristopherStrydom

@jaepage Seharusnya tidak masalah, karena objectsekarang akan berada dalam konteks susun yang lebih rendah (di bawah) daripada induknya.
Jason T Featheringham

apakah ini berfungsi pada iPhone / seluler? tidak untukku tidak dapat diklik /
disadap

3

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)


Apakah Anda menemukan bahwa menambahkan onclick ke <svg>elemen luar dan tidak membungkusnya sama sekali tidak berhasil?
Robert Longson

1
Anda dapat menggunakan acara elemen root svg juga. sebagai tambahan pada event klik saya menggunakan onmouseout, ontouchstart, ontouchend dll ... dan untuk elemen root svg saya sering menggunakan event onload. Solusi Ben Frain di bawah ini melibatkan menggambar objek sampul tambahan (persegi panjang) untuk menangkap peristiwa klik ... jadi saya menawarkan solusi ini untuk menampilkan acara pada elemen gambar sendiri tanpa harus membuat sampul transparan hanya untuk mendapatkan acara klik. Terutama membantu ketika Anda tidak ingin menggambar elemen lain atau Anda ingin acara khusus untuk bentuk yang ada dan bukan persegi panjang.
Bruce Pezzlo

3

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>
  


Namespace 'xlink' berikut harus ditambahkan ke elemen svg untuk membuat pekerjaan ini: xmlns: xlink = " w3.org/1999/xlink "
Mere Development

Tidak ada solusi lain yang bekerja untuk saya tetapi yang ini berhasil, wah, terima kasih!
ByteMyPixel

Walaupun saya biasanya tidak ragu untuk mengubah file SVG secara langsung, dalam skenario saya, saya menggunakan SVG yang sama untuk beberapa tautan berbeda - artinya secara teoritis, saya harus membuat SVG yang berbeda untuk masing-masingnya. Atau, tentu saja, saya bisa menambahkan bit inline grafis di tag <svg>, tapi saya benci kode duplikat (meskipun SVG yang sebenarnya saya dapatkan kecil ...)
Gwyneth Llewelyn

0

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>

btw saya menggunakan tailwind css.
Ege Hurturk

-5

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>

Saya mencoba ini, baik dengan dan tanpa tag <a> sekitarnya, dan saya tidak bisa membuatnya berfungsi. Saya mencoba FF dan Chrome di Linux. Di browser mana Anda mencoba ini?
iancoleman

6
Akan sangat bagus jika Anda bisa mencobanya dan mengonfirmasi bahwa itu berhasil sehingga orang lain yang membaca ini dapat yakin dengan jawaban Anda. "Ini harus bekerja" secara teori baik-baik saja, tetapi bagi saya itu harus bekerja dalam praktik.
iancoleman

Saya baru saja mencoba ini di Chrome 45 di Windows dan tampaknya berfungsi dengan baik. Saya menambahkan onClick langsung ke tag SVG tanpa jangkar pembungkus. Akan lebih baik jika downvotes menjelaskan alasannya.
Mengejar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.