लिंक के साथ एचटीएमएल में एक एसवीजी ऑब्जेक्ट कैसे सम्मिलित करें?

Question

मैं एक svg में लिंक जोड़ने के लिए नहीं करना चाहते हैं (जो संभव है क्योंकि svg मेरे द्वारा प्रदान नहीं की है नहीं है), लेकिन <a href=""><img src="foo.svg"/></a> की तरह एक लिंक जोड़ना चाहते हैं। केवल इस बार यह img नहीं है, लेकिन object (इसलिए मैं एक svg शामिल कर सकता हूं)।

यह कुछ ब्राउज़र के साथ काम करता है, लेकिन फ़ायरफ़ॉक्स के साथ उदाहरण के लिए नहीं। डिफ़ॉल्ट विचार क्या है कि ऐसा कुछ कैसे करें?

Answer 1

फ़ायरफ़ॉक्स <object> में होने वाले सभी क्लिक कब्जा है और उन्हें "बुलबुला" नहीं करता है एसवीजी दस्तावेज़ के बाहर। एक समझदार कामकाज एसवीजी को दूसरे तत्व के साथ कवर करना है जो पहले क्लिक प्राप्त करता है।

सौभाग्य से यह शुद्ध सीएसएस के साथ किया जा सकता है:

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

आप चयनकर्ता के :-moz-any-link छद्म वर्ग को जोड़ने के लिए यह छिपकली-केवल बनाने के लिए चाहते हो सकता है।

Answer 2

उदाहरण के बजाय svg फ़ाइल के अंदर लिंक रखो,:

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

Answer 3

svgweb के साथ आप मनमाने ढंग से एसवीजी क्रॉस-ब्राउज़र एम्बेड कर सकते हैं, और नियमित रूप से डोम विधियों के माध्यम से इसे संशोधित। इसमें एसवीजी के किसी भी हिस्से में ईवेंट श्रोताओं को संलग्न करना शामिल है।

svgweb मुख पृष्ठ:
http://code.google.com/p/svgweb/

svgweb त्वरित प्रारंभ (भी घटना श्रोताओं को जोड़ने की चर्चा):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

यहां तक ​​कि अगर आप इसे एक पारंपरिक एंकर टैग में इस तरह से नहीं रख सकते हैं (मैं कोशिश नहीं की है, यह काम कर सकता है), आप कम से कम क्लिक ईवेंट को संभालने में सक्षम होंगे और उन पर आधारित नेविगेट करेंगे, जो वास्तव में आप के बाद क्या हैं।