ทำให้วัตถุ html svg ยังเป็นลิงค์ที่คลิกได้


143

ฉันมีวัตถุ 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 คลิกได้อย่างไร

คำตอบ:


20

วิธีที่ง่ายที่สุดคือไม่ใช้ <object> ใช้แท็ก <img> แทนและตัวยึดควรทำงานได้ดี


1
แท็ก img โดยปกติแล้วจะไปที่ที่แท็ก span สำหรับสิ่งนี้เพื่อลดระดับลงอย่างงดงาม
Adrian Garner

18
แนวคิดที่จะแสดงเวกเตอร์ svg ไม่ใช่ภาพหรือไม่
ลุค

7
@ ErikDahlström แต่<img>มีการอ้างอิงถึงข้อมูล svg ไม่สามารถทำงานได้ตามที่คุณคาดหวังแม้แต่ใน Chrome เวอร์ชันล่าสุด :( stackoverflow.com/questions/15194870/…
dshap

15
เมื่อ @energee ชี้ให้เห็นคุณสามารถใช้<object>แท็กและเพิ่ม a point-event: none;เพื่อให้สามารถคลิกได้ มันรักษาการเข้าถึงซอร์สโค้ด svg ของคุณและอนุญาตให้คุณจัดการมันแบบไดนามิก
แอนทอน

1
การใช้ a imgไม่ใช่ตัวเลือกเสมอไป ในกรณีของฉันฉันต้องจัดการ SVG ซึ่งสามารถทีจะทำอย่างถูกต้องผ่านผมต้องใช้img object
Martijn

216

ที่จริงแล้ววิธีที่ดีที่สุดในการแก้ปัญหานี้คือ ... บนแท็ก <object> ใช้:

pointer-events: none;

หมายเหตุ: ผู้ใช้ที่ติดตั้งปลั๊กอิน Ad Blocker จะได้รับแท็บ [บล็อก] ที่มุมขวาบนเมื่อเลื่อนเมาส์ลง (เช่นเดียวกับแบนเนอร์แฟลชที่ได้รับ) โดยการตั้งค่า css นี้ก็จะหายไปเช่นกัน

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


4
หมายเหตุ: IE จะไม่สนับสนุนตัวชี้เหตุการณ์บนองค์ประกอบปกติจนกระทั่ง IE 11 แต่รองรับใน SVG แล้ว ดูcaniuse.com/pointer-events
webdesserts

9
ข้อเสียของการแก้ปัญหานี้ (และจาก noelmcg เช่นกัน) คือถ้าไฟล์ SVG ของคุณมีกฎ CSS ที่มี: ตัวเลือกโฮเวอร์กฎเหล่านี้จะหยุดทำงาน ทางออกที่เสนอโดย Ben Frain ไม่มีปัญหานี้
MathieuLescure

6
คำตอบนี้ควรได้รับการอนุมัติ การใช้imgกับ svg ทำให้ไม่สามารถเปลี่ยนรูปแบบ SVG ภายในได้
cadavre

3
นี่จะต้องเป็นคำตอบที่ได้รับการอนุมัติ! ดีมากขอบคุณ
Daniel Broughan

5
คำตอบที่ดี ฉันทำของฉันสากลกับสิ่งนี้ใน css สากล object [type * = "svg"] {ตัวชี้เหตุการณ์: ไม่มี}
Gregor Macgregor

40

ฉันมีปัญหาเดียวกันและจัดการเพื่อแก้ไขปัญหานี้โดย:

การห่อวัตถุด้วยชุดองค์ประกอบเพื่อบล็อกหรือบล็อกแบบอินไลน์

<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


1
ขออภัยลืมจอแสดงผล: องค์ประกอบแบบอินไลน์บล็อก / บล็อกเพื่อล้อมรอบวัตถุ
Richard

1
ทางออกที่ดีที่สุดที่นี่!
Baldráni

นี่เป็นทางออกที่ดีที่สุดสำหรับปัญหานี้และใช้งานได้บนเบราว์เซอร์ทั้งหมด
Kalpesh Popat

1
ถ้าภาพมีความโปร่งใส bg บิตเหล่านั้นจะไม่สามารถคลิกได้
sobelito

สิ่งนี้ได้ผลสำหรับฉันฉันต้องเพิ่มส่วนสูง: 100% ไปยังองค์ประกอบ a และ span ในสถานการณ์ของฉัน
sk03

32

ต้องการเครดิตสำหรับสิ่งนี้ แต่ฉันพบวิธีแก้ไขที่นี่:

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 และบนทางเลือก


2
นี่เป็นทางออกที่ง่ายที่สุดและได้รับการสนับสนุนมากที่สุดในความเห็น
ประเภทแบบ

3
สิ่งนี้ยังคงมีปัญหา: เหตุการณ์ตัวชี้ SVG (ภาพเคลื่อนไหว) ไม่ทำงานอีกต่อไป (mouseover, mouseout, click)! เช่นเดียวกับเพียงแค่ใช้ตัวชี้เหตุการณ์: ไม่มีวัตถุที่ตัวเอง ...
qdev

26

คุณสามารถติดอะไรแบบนี้ที่ด้านล่างของ 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 - นั่นคือสิ่งที่ฉันเห็นครั้งแรกที่ใช้


2
ฉันมีสไตล์ CSS ด้วย: ตัวเลือกโฮเวอร์ที่ฝังอยู่ในไฟล์ SVG ของฉัน นี่เป็นทางออกเดียวที่ไม่ปิดการใช้งานสไตล์
MathieuLescure

21

ความเรียบง่ายของโซลูชันของ Richard ทำงานอย่างน้อยใน Firefox, Safari และ Opera:

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

ดูhttp://www.noupe.com/tutorial/svg-clickable-71346.htmlสำหรับวิธีแก้ไขเพิ่มเติม


3
ขอบคุณฉันต้องการชุดการแสดงผลเป็นblockหรือinline-blockบนพาเรน<a>ต์
element119

ลิงค์ที่ดี: noupe.com/inspiration/tutorials-inspiration/ …มีข้อดีและข้อเสียสำหรับแต่ละวิธี
Serge Stroobandt

ฉันยังจำเป็นต้องใช้inline-blockในบางกรณี แต่blockดูเหมือนจะทำงานได้ดีในกรณีอื่น ๆ ; ฉันเดาว่ามันขึ้นอยู่กับบล็อกที่ปิดล้อม ...
Gwyneth Llewelyn

9

ในการทำสิ่งนี้ให้สำเร็จในเบราว์เซอร์ทั้งหมดคุณต้องใช้วิธีการ @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 เช่นกัน

@janaspage ฉันไม่แน่ใจว่า ... ฉันไม่ได้พยายามที่จะออกใน IE 10. แจ้งให้เราทราบว่าการทำงาน :)
ChristopherStrydom

@jaepage ไม่สำคัญเพราะobjectตอนนี้จะอยู่ในบริบทการสแต็ก(ด้านล่าง) ที่ต่ำกว่าพาเรนต์
Jason T Featheringham

มันใช้กับ iPhone / มือถือได้ไหม? ไม่ได้สำหรับฉัน ไม่สามารถคลิกได้ /
แทป

3

ฉันแก้ไขปัญหานี้ด้วยการแก้ไขไฟล์ svg ด้วย

ฉันห่อ xml ของกราฟิก svg ทั้งหมดไว้ในแท็กกลุ่มที่มีเหตุการณ์คลิกดังนี้:

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

โซลูชันทำงานในเบราว์เซอร์ทั้งหมดที่สนับสนุนสคริปต์ svg (เริ่มต้นแท็ก img ภายในองค์ประกอบวัตถุของคุณสำหรับเบราว์เซอร์ที่ไม่รองรับ svg และคุณจะครอบคลุมขอบเขตของเบราว์เซอร์)


คุณพบว่าการเพิ่ม onclick ให้กับ<svg>องค์ประกอบด้านนอกและไม่ห่อมันเลยใช้งานไม่ได้ใช่ไหม
Robert Longson

1
คุณสามารถใช้เหตุการณ์ขององค์ประกอบ svg ได้เช่นกัน นอกเหนือจากเหตุการณ์ onclick ฉันใช้ onmouseout, ontouchstart, ontouchend ฯลฯ ... และสำหรับองค์ประกอบ svg root ฉันใช้เหตุการณ์ onload บ่อยครั้ง วิธีการแก้ปัญหา Ben Frain ด้านล่างเกี่ยวข้องกับการวาดวัตถุปกพิเศษ (สี่เหลี่ยมผืนผ้า) เพื่อจับภาพเหตุการณ์การคลิก ... ดังนั้นฉันจึงเสนอวิธีแก้ปัญหานี้ที่แสดงการรับเหตุการณ์บนองค์ประกอบการวาดภาพด้วยตัวเองโดยไม่ต้องสร้างปกโปร่งใสเพียงเพื่อรับเหตุการณ์คลิก มีประโยชน์อย่างยิ่งเมื่อคุณไม่ต้องการวาดองค์ประกอบอื่นหรือคุณต้องการให้เหตุการณ์เฉพาะกับรูปร่างที่มีอยู่และไม่ใช่รูปสี่เหลี่ยมผืนผ้า
Bruce Pezzlo

3

ฉันลองวิธีทำความสะอาดนี้ง่ายและดูเหมือนว่าจะทำงานในทุกเบราว์เซอร์ ข้างในไฟล์ svg:

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


เนมสเปซ 'xlink' ต่อไปนี้จะต้องถูกเพิ่มลงในองค์ประกอบ svg เพื่อทำให้งานนี้: xmlns: xlink = " w3.org/1999/xlink "
การพัฒนาเพียง

ไม่มีวิธีแก้ปัญหาอื่นที่ใช้งานได้สำหรับฉัน แต่อันนี้ใช้ได้แล้วขอบคุณ!
ByteMyPixel

แม้ว่าโดยปกติฉันจะไม่มีความรู้เรื่องการเปลี่ยนไฟล์ SVG โดยตรงในสถานการณ์ของฉัน แต่ฉันใช้SVG เดียวกันสำหรับลิงก์ต่าง ๆ - ซึ่งหมายความว่าในทางทฤษฎีแล้วฉันต้องสร้าง SVG ที่แตกต่างกันสำหรับแต่ละไฟล์ อีกวิธีหนึ่งแน่นอนฉันสามารถเพิ่มกราฟิกบิตแบบอินไลน์ในแท็ก <svg> แต่ฉันเกลียดรหัสซ้ำ (แม้ว่า SVG จริงฉันมีขนาดเล็ก ... )
Gwyneth Llewelyn

0

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

btw ฉันใช้ css tailwind
Ege Hurturk

-5

ทำด้วย javascript และเพิ่มonClick-attribute ไปยัง -element ของคุณ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>

ฉันลองสิ่งนี้ทั้งที่มีและไม่มีแท็ก <a> โดยรอบและไม่สามารถใช้งานได้ ฉันลองใช้ FF และ Chrome บน Linux คุณลองใช้เบราว์เซอร์ตัวไหน
iancoleman

6
มันจะดีถ้าคุณสามารถลองและยืนยันว่ามันใช้งานได้เพื่อให้คนอื่นที่อ่านข้อความนี้มั่นใจในคำตอบของคุณ "มันต้องใช้งานได้" เป็นเรื่องดีในทางทฤษฎี แต่สำหรับฉันแล้วมันต้องทำงานในทางปฏิบัติ
iancoleman

ฉันเพิ่งลองสิ่งนี้บน Chrome 45 บน Windows และดูเหมือนว่าจะทำงานได้ดี ฉันเพิ่ม onClick โดยตรงไปยังแท็ก SVG โดยไม่ต้องยึดส่วนที่ห่อไว้ มันจะดีถ้า downvotes อธิบายว่าทำไม
เชส
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.