ทำให้วัตถุ 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 คลิกได้อย่างไร

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

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

pointer-events: none;

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

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

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

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

<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

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

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

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

ความเรียบง่ายของโซลูชันของ 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สำหรับวิธีแก้ไขเพิ่มเติม

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

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

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

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

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

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

ทำด้วย 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>