html svg ऑब्जेक्ट भी एक क्लिक करने योग्य लिंक बनाते हैं

Question

मेरे HTML पृष्ठ में मेरे पास SVG ऑब्जेक्ट है और इसे लंगर में लपेट रहा हूँ ताकि जब 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 छवि को क्लिक करने योग्य कैसे बना सकता हूं?

Answer 1

सबसे आसान तरीका <ऑब्जेक्ट> का उपयोग नहीं करना है। इसके बजाय <img> टैग का उपयोग करें और एंकर को ठीक काम करना चाहिए।

Comments

आईएमजी टैग सामान्य रूप से जाना जाएगा जहाँ स्पान टैग इसके लिए इनायत से नीचा दिखाना है।

— एड्रियन गार्नर

एक svg वेक्टर प्रदर्शित करने के लिए विचार नहीं है, छवि नहीं?

— ल्यूक

@ ErikDahlström लेकिन <img>svg डेटा के संदर्भ में हमेशा आपकी अपेक्षा के अनुरूप काम नहीं करता है, यहां तक ​​कि क्रोम के नवीनतम संस्करण में भी :( stackoverflow.com/questions/15194870/…

— dshap

जैसा कि @energee ने बताया है, आप <object>टैग का उपयोग कर सकते हैं और point-event: none;इसे क्लिक करने योग्य बनाने के लिए जोड़ सकते हैं । यह आपके svg स्रोत कोड तक पहुंच को संरक्षित करता है और आपको गतिशील रूप से इसमें हेरफेर करने की अनुमति देता है।

— एंटोनी

का उपयोग करना imgहमेशा एक विकल्प नहीं होता है। मेरे मामले में, मुझे svg में हेरफेर करने की आवश्यकता है, जो ठीक से नहीं हो सकता है img, मुझे इसका उपयोग करना है object।

— मार्टिनेज

Answer 2

दरअसल, इसे हल करने का सबसे अच्छा तरीका है ... <ऑब्जेक्ट> टैग, उपयोग पर:

pointer-events: none;

नोट: जिन उपयोगकर्ताओं के पास विज्ञापन अवरोधक प्लगइन स्थापित है, उन्हें हॉवर करने पर ऊपरी दाएं कोने पर एक टैब जैसा [ब्लॉक] मिलता है (फ्लैश बैनर जैसा ही मिलता है)। इस सीएसएस की सेटिंग से, वह भी दूर चला जाएगा।

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

Comments

नोट: IE IE 11 तक नियमित तत्वों पर सूचक-घटनाओं का समर्थन नहीं करेगा, लेकिन पहले से ही एसवीजी पर उनका समर्थन करता है। Caniuse.com/pointer-events

— webdesserts

इस समाधान का एक दोष (और noelmcg से एक भी) यदि आपकी SVG फ़ाइल में a: hover चयनकर्ता के साथ CSS नियम हैं, तो ये नियम काम करना बंद कर देंगे। बेन फ्रेन द्वारा प्रस्तावित समाधान में यह समस्या नहीं है।

— मैथ्यूएलस्क्योर

इसका उत्तर स्वीकृत होना चाहिए। imgआंतरिक एसवीजी शैलियों को बदलने के लिए एसवीजी का उपयोग करना तब अनुपयोगी हो जाता है।

— cadavre

यह स्वीकृत उत्तर होना चाहिए! वास्तव में अच्छा है, धन्यवाद

— डैनियल ब्रूघन

बहुत बढ़िया जवाब। मैंने वैश्विक सीएसएस में इसके साथ मुझे सार्वभौमिक बना दिया। ऑब्जेक्ट [प्रकार * = "svg"] {पॉइंटर-ईवेंट: कोई नहीं}

— ग्रेगर मैकलेगर

Answer 3

मेरे पास एक ही मुद्दा था और इसे हल करने में कामयाब रहे:

ब्लॉक या इनलाइन-ब्लॉक करने के लिए एक तत्व के साथ वस्तु लपेटना

<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

Comments

माफी, प्रदर्शन भूल गए: इनलाइन-ब्लॉक / ब्लॉक एलिमेंट को ऑब्जेक्ट के चारों ओर लपेटने के लिए

— रिचर्ड

सबसे अच्छा समाधान यहाँ!

— बाल्ड्रानी २ '

यह इस समस्या का सबसे अच्छा समाधान है और सभी ब्राउज़र पर काम करता है

— कल्पेश पोपट

यदि छवि में पारदर्शी बीजी है, तो वे बिट्स क्लिक करने योग्य नहीं दिखाई देते हैं

— सोबेलिटो

यह मेरे लिए काम करता है, मुझे भी अपनी स्थिति में ऊंचाई और तत्वों को जोड़ने के लिए 100% जोड़ना था

— sk03

Answer 4

इसका श्रेय लेना चाहते हैं लेकिन मुझे यहां एक समाधान मिला:

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

लंगर के लिए सीएसएस में निम्नलिखित जोड़ें:

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>

लिंक एसवीजी और फॉलबैक पर काम करता है।

Comments

राय में यह सबसे आसान और सबसे समर्थित उपाय है

— टाइप-स्टाइल

यह अभी भी एक मुद्दा है: SVG पॉइंटर इवेंट्स (एनिमेशन) अब काम नहीं कर रहे हैं (माउसओवर, माउसआउट, क्लिक करें)! जैसे कि केवल पॉइंटर-ईवेंट्स का उपयोग करना: कोई भी वस्तु पर ही नहीं ...

— क्यूदेव

Answer 5

आप अपने एसवीजी के निचले हिस्से में भी कुछ इस तरह चिपका सकते हैं (समापन </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>

फिर बस सूट के लिए लिंक में संशोधन करें। मैंने SVG को कवर करने के लिए 100% चौड़ाई और ऊंचाई का उपयोग किया है। यह तकनीक का श्रेय Clearleft.com पर स्मार्ट लोगों को जाता है - यही वह जगह है जहाँ मैंने पहली बार इसका इस्तेमाल किया था।

Comments

मेरे पास css शैलियाँ हैं: मेरी SVG फ़ाइल में एम्बेडेड होवर चयनकर्ता। यह एकमात्र समाधान है जो शैली को निष्क्रिय नहीं करता है।

— MathieuLescure

Answer 6

रिचर्ड के समाधान का एक सरलीकरण। कम से कम फ़ायरफ़ॉक्स, सफारी और ओपेरा में काम करता है:

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

अतिरिक्त समाधान के लिए http://www.noupe.com/tutorial/svg-clickable-71346.html देखें ।

Comments

धन्यवाद, मुझे blockया inline-blockमाता-पिता के लिए सेट प्रदर्शन की आवश्यकता थी <a>।

— element119

अच्छा लिंक: noupe.com/inspiration/tutorials-inspiration/… में प्रत्येक समाधान के लिए पेशेवरों और विपक्ष हैं।

— सर्ज स्ट्राओबांट

मुझे inline-blockकुछ मामलों में उपयोग करने की भी आवश्यकता थी , लेकिन blockअन्य मामलों में अच्छी तरह से काम करने के लिए लग रहा था; मुझे लगता है कि यह संलग्न ब्लॉकों पर निर्भर करता है ...

— ग्वेनेथ लेलेवेन

Answer 7

सभी ब्राउज़रों में इसे पूरा करने के लिए आपको @energee, @Richard और @Feuermurmel विधियों के संयोजन का उपयोग करने की आवश्यकता है।

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

जोड़ना:

• pointer-events: none; यह फ़ायरफ़ॉक्स में काम करता है।
• display: block; यह क्रोम और सफारी में काम करता है।
• z-index: 1; z-index: -1; यह IE में भी काम करता है।

Comments

@janaspage मुझे यकीन नहीं है ... मैंने IE 10 पर इसे आज़माया नहीं है। मुझे बताएं कि क्या यह काम करता है :)

— क्रिस्टोफरस्ट्रायड

@jaepage यह बात नहीं होनी चाहिए, क्योंकि objectअब यह माता-पिता की तुलना में कम स्टैकिंग-संदर्भ (अंडर) में होगा।

— जेसन टी फेदरसिंघम

क्या यह iPhone / मोबाइल पर काम करता है? मेरे लिए नहीं है। नहीं क्लिक करने योग्य /

— टेप

Answer 8

मैंने इसे svg फ़ाइल को भी संपादित करके हल किया।

मैंने एक समूह टैग में पूरे svg ग्राफिक की xml को लपेटा है जिसमें एक क्लिक की घटना निम्नानुसार है:

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

समाधान उन सभी ब्राउज़रों में काम करता है जो ऑब्जेक्ट svg स्क्रिप्ट का समर्थन करते हैं। (ब्राउज़र के लिए अपने ऑब्जेक्ट एलिमेंट के अंदर एक img टैग को डिफ़ॉल्ट करें जो svg का समर्थन नहीं करता है और आप ब्राउज़रों के सरगम ​​को कवर करेंगे)

Comments

क्या आपने पाया कि बाहरी <svg>तत्व पर ऑन्कलिक जोड़ना और इसे लपेटना बिल्कुल भी काम नहीं आया?

— रॉबर्ट लोंग्सन

आप रूट svg तत्व की घटनाओं का भी उपयोग कर सकते हैं। ऑन्ग्लिक इवेंट्स के अलावा, मैं ऑनमाउज़आउट, ऑनटूस्टार्ट, ऑनटचेंड आदि का उपयोग करता हूं ... और रूट svg तत्व के लिए मैं अक्सर ओलोड लोड इवेंट का उपयोग करता हूं। नीचे दिए गए बेन फ़्रेन समाधान में क्लिक इवेंट्स को कैप्चर करने के लिए एक अतिरिक्त कवर ऑब्जेक्ट (एक आयत) आरेखित करना शामिल है ... इसलिए मैंने इस समाधान की पेशकश की, जिसमें केवल एक क्लिक इवेंट प्राप्त करने के लिए एक पारदर्शी कवर बनाने के लिए बिना ड्राइंग तत्वों पर होने वाली घटनाओं को दिखाया गया है। विशेष रूप से तब सहायक होता है जब आप किसी अन्य तत्व को आकर्षित नहीं करना चाहते हैं या आप घटनाओं को मौजूदा आकार के लिए विशिष्ट बनाना चाहते हैं न कि आयत से।

— ब्रूस Pezzlo

Answer 9

मैं इस आसान आसान विधि की कोशिश की और सभी ब्राउज़रों में काम करने लगता है। अंदर svg फ़ाइल:

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

Comments

इस कार्य को करने के लिए निम्नलिखित 'xlink' नामस्थान को svg तत्व में जोड़ना होगा: xmlns: xlink = " w3.org/1999/xlink "

— मेरे विकास

अन्य समाधानों में से किसी ने भी मेरे लिए काम नहीं किया, लेकिन इसने किया, धन्यवाद!

— बाइटमीपिक्सल

यद्यपि मेरे पास आमतौर पर सीधे एसवीजी फ़ाइल को बदलने के बारे में कोई योग्यता नहीं है, मेरे परिदृश्य में, मैं कई अलग-अलग लिंक के लिए एक ही एसवीजी का उपयोग करता हूं - जिसका अर्थ है कि सैद्धांतिक रूप से, मुझे प्रत्येक के लिए एक अलग एसवीजी बनाना होगा। वैकल्पिक रूप से, निश्चित रूप से, मैं ग्राफिक बिट इनलाइन को <svg> टैग में जोड़ सकता था, लेकिन मुझे डुप्लिकेट कोड से नफरत है (भले ही वास्तविक एसवीजी मुझे छोटा है ...)

— ग्वेनेथ लेलेवेन

Answer 10

बस उपयोग नहीं करते <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>

Comments

btw मैं टेलविंड सीएसएस का उपयोग कर रहा हूं।

— एग हर्टर्क

Answer 11

इसे जावास्क्रिप्ट के साथ करें और onClickअपने -मेंट के लिए -attribute जोड़ें 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>

Comments

मैंने यह कोशिश की, दोनों के साथ और आसपास के <a> टैग के बिना, और मुझे यह काम करने के लिए नहीं मिल सकता है। मैंने लिनक्स पर एफएफ और क्रोम में कोशिश की। किस ब्राउज़र में आपने यह कोशिश की?

— इयानकॉलेमैन

यह बहुत अच्छा होगा यदि आप इसे आज़मा सकते हैं और पुष्टि कर सकते हैं कि यह काम करता है तो अन्य जो इसे पढ़ते हैं वे आपके उत्तर के बारे में आश्वस्त हो सकते हैं। "यह काम करना चाहिए" सिद्धांत रूप में ठीक है, लेकिन मेरे लिए यह व्यवहार में काम करना चाहिए।

— इयोनक्लेमैन

मैंने बस विंडोज पर क्रोम 45 पर यह कोशिश की और यह ठीक काम करने लगता है। मैंने बिना किसी रैपिंग एंकर के सीधे सीधे SVG टैग पर जोड़ा। यह अच्छा होगा यदि डाउनवोट्स ने समझाया कि क्यों।

— 22