làm cho một đối tượng svg html cũng là một liên kết có thể nhấp

Tôi có một đối tượng SVG trong trang HTML của mình và đang gói nó trong một neo vì vậy khi hình ảnh svg được nhấp, nó sẽ đưa người dùng đến liên kết neo.

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

Khi tôi sử dụng khối mã này, nhấp vào đối tượng svg sẽ không đưa tôi đến google. Trong IE8 <văn bản span có thể nhấp.

Tôi không muốn sửa đổi hình ảnh svg của mình để chứa các thẻ.

Câu hỏi của tôi là, làm thế nào tôi có thể làm cho hình ảnh svg có thể nhấp được?

Cách dễ nhất là không sử dụng <object>. Thay vào đó, hãy sử dụng thẻ <img> và neo sẽ hoạt động tốt.

Trên thực tế, cách tốt nhất để giải quyết vấn đề này là ... trên thẻ <object>, sử dụng:

pointer-events: none;

Lưu ý: Người dùng đã cài đặt plugin Trình chặn quảng cáo sẽ nhận được [Chặn] giống như tab ở góc trên bên phải khi di chuột (giống như biểu ngữ flash được). Bằng cách cài đặt css này, điều đó cũng sẽ biến mất.

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

Tôi đã có cùng một vấn đề và quản lý để giải quyết điều này bằng cách:

Bao bọc đối tượng bằng một phần tử được đặt thành khối hoặc khối nội tuyến

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

Thêm vào <a>thẻ:

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

và vào <span>thẻ:

display: inline-block;

và vào <object>thẻ:

position: relative; 
z-index: -1

Xem một ví dụ ở đây: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Tìm thấy thông qua nhận xét 20 tại đây https://ormszilla.mozilla.org/show_orms.cgi?id=294932

Muốn lấy tín dụng cho việc này nhưng tôi đã tìm thấy một giải pháp ở đây:

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

thêm phần sau vào css cho neo:

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>

Liên kết hoạt động trên các Svg và trên dự phòng.

Bạn cũng có thể dán một cái gì đó như thế này vào dưới cùng của SVG (ngay trước </svg>thẻ đóng ):

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

Sau đó chỉ cần sửa đổi các liên kết cho phù hợp. Tôi đã sử dụng 100% chiều rộng và chiều cao để trang trải cho SVG mà nó có. Tín dụng cho kỹ thuật này dành cho những người thông minh tại Clearleft.com - đó là nơi lần đầu tiên tôi nhìn thấy nó được sử dụng.

Đơn giản hóa giải pháp của Richard. Hoạt động ít nhất trong Firefox, Safari và Opera:

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

Xem http://www.noupe.com/tutorial/svg-clickable-71346.html để biết thêm giải pháp.

Để thực hiện điều này trong tất cả các trình duyệt, bạn cần sử dụng kết hợp các phương thức @energee, @Richard và @Feuermurmel.

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

Thêm:

• pointer-events: none; làm cho nó hoạt động trong Firefox.
• display: block; làm cho nó hoạt động trong Chrome và Safari.
• z-index: 1; z-index: -1; làm cho nó hoạt động trong IE là tốt.

Tôi đã giải quyết điều này bằng cách chỉnh sửa tập tin svg.

Tôi đã gói xml của toàn bộ đồ họa svg trong thẻ nhóm có sự kiện nhấp như sau:

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

Giải pháp hoạt động trong tất cả các trình duyệt hỗ trợ tập lệnh svg đối tượng. (mặc định thẻ img bên trong thành phần đối tượng của bạn cho các trình duyệt không hỗ trợ svg và bạn sẽ bao quát toàn bộ gam của trình duyệt)

tôi đã thử phương pháp dễ dàng sạch sẽ này và dường như hoạt động trong tất cả các trình duyệt. Bên trong tập tin svg:

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

Chỉ không sử dụng <object>. Đây là một giải pháp phù hợp với tôi <a>và <svg>các thẻ:

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

Làm điều đó với javascript và thêm một onClick-attribution vào -element của bạn 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>