2010-01-18 90 views
10

Tôi không muốn thêm liên kết vào svg (điều này là không thể vì svg không được cung cấp bởi tôi), nhưng muốn thêm liên kết như <a href=""><img src="foo.svg"/></a>. Chỉ rằng lần này không phải là img, mà là object (vì vậy tôi có thể bao gồm một svg).Làm thế nào để chèn một đối tượng SVG vào HTML với các liên kết?

Nó hoạt động với một số trình duyệt, nhưng ví dụ không có firefox. Ý tưởng mặc định là làm thế nào để làm điều gì đó như thế?

Trả lời

11

Trong Firefox <object> chụp tất cả các lần nhấp và không để chúng "bong bóng" ra khỏi tài liệu SVG. Cách giải quyết hợp lý là bao gồm SVG với một yếu tố khác nhận được lần nhấp đầu tiên.

May mắn thay điều này có thể được thực hiện với CSS tinh khiết:

a {position:relative; display:inline-block;} 
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;} 

Bạn có thể muốn thêm :-moz-any-link pseudo-class để chọn để làm cho nó Gecko-only.

3

Đặt liên kết bên trong file svg thay vào đó, ví dụ:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<a xlink:href=""> 
    ... 
</a> 
</svg> 
+0

... và nếu tệp được lưu trữ trên cùng một tên miền và bạn thực sự muốn tránh thay đổi tệp trên máy chủ, bạn có thể thử một cái gì đó như sau: var aElm = yourObjectElm.contentDocument.documentElement.createElementNS (" http://www.w3.org/2000/svg "," a "); aElm.href.baseVal = "http://your.link.here.com"; // ... nối thêm tất cả trẻ em của yourObjectElm.contentDocument.documentElement vào aElm ... // yourObjectElm.contentDocument.documentElement.appendChild (aElm); –

+0

Javascript là không thể và tôi không thể sửa đổi các tập tin – user253104

0

Với svgweb bạn có thể nhúng tùy ý SVG qua trình duyệt, và sửa đổi nó thông qua các phương pháp DOM thường xuyên. Điều này bao gồm gắn trình nghe sự kiện vào bất kỳ phần nào của SVG.

trang chủ

svgweb:
http://code.google.com/p/svgweb/

svgweb QuickStart (cũng thảo luận thêm người nghe sự kiện):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Thậm chí nếu bạn không thể đặt nó trong một thẻ neo truyền thống theo cách này (tôi đã không cố gắng, nó có thể làm việc), bạn sẽ ít nhất có thể xử lý các sự kiện nhấp chuột và điều hướng dựa trên chúng, mà thực sự là những gì bạn đang sau.

+0

Javascript là không thể – user253104

Các vấn đề liên quan