कर्सर: सूचक; svg तत्व पर काम नहीं कर रहा है

Question

मेरी वेबसाइट में मैं svg तत्वों का उपयोग करता हूं। कभी-कभी मुझे उन्हें क्लिक करने योग्य होने की आवश्यकता होती है, इसलिए मैं उन पर पॉइंटर कर्सर चाहता हूं।

हालांकि सीएसएस वर्ग या शैली

cursor: pointer; 

काम नहीं जोड़ रहा है।

उदाहरण तत्वों का, जो

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object> 

ऐसा लगता है कि यह सिर्फ svg साथ में काम कर रहे नहीं। किसी को पता है कि कैसे ठीक करें, या इसके आसपास कैसे जाना है?

Answer 1

जैसा कि अमेलियाबीआर की टिप्पणी इंगित करता है, आपको इस शैली को एसवीजी <object> के अंदर जोड़ना चाहिए।

और जब तक कि आपका एसवीजी बहुत आसान न हो, तब तक आपके पास एक ही समस्या हो सकती है: जब आप एसवीजी में आकारों में से एक पर होवर करते हैं तो केवल एक पॉइंटर देखते हैं, लेकिन जब आप आकार के बीच नहीं होते हैं।

(कुछ मामलों में आप उस व्यवहार चाहते हो सकता है, लेकिन एक वर्डमार्क के लिए, उदाहरण के लिए, आप आमतौर पर पूरी आयत क्लिक करने योग्य, न कि केवल पत्र होना चाहता हूँ।)

पूरी आयत क्लिक करने योग्य बनाने के लिए, svg { cursor: pointer; } जोड़ें। तुम सिर्फ विशिष्ट तत्वों क्लिक करने योग्य चाहते हैं, उन्हें वर्ग द्वारा नाम:

<svg ...> 
    <style> 
    svg { cursor: pointer; } /* whole rectangle */ 

    /* OR */ 

    .element-name { cursor: pointer; } /* specific elements */ 
    </style> 
    ... 
</svg> 

Answer 2

हैं "cursor: pointer" svg तत्व काम नहीं करता है को जोड़ने सीधे, आप object पर सीधे छद्म एक पारदर्शी तत्व जोड़ने के लिए (तत्वों कोशिश कर सकते हैं या तो टैग काम नहीं करता) एसवीजी के समान आयामों के साथ जो पूरी तरह से एसवीजी पर स्थित है।

a.svg-cursor:before { 
 
content: ""; 
 
display: block; 
 
position: absolute; 
 
background-color: transparent; 
 
cursor: pointer; 
 
/* plus width and height of the SVG */ 
 
}

<a href="#" class="svg-cursor"> 
 
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object> 
 
</a>

या आप object के बजाय एक img लेने के लिए और img में जोड़ें "cursor: pointer" शैली कर सकते हैं:

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

Answer 3

अपने एसवीजी में अलग-अलग तत्वों शैली के लिए आप जावास्क्रिप्ट का उपयोग कर सकते हैं या छवि के अंदर सीएसएस का उपयोग डिफ टैग में कर सकते हैं या बाहरी स्टाइलशीट का संदर्भ दे सकते हैं।

<svg ...> 
    <defs> 
    <style type="text/css"><![CDATA[ 
     .myfigureclass { 
     cursor: pointer; 
     } 
    ]]></style> 
    </defs> 

अधिक जानकारी के लिए चेक this link। अधिक जानकारी के लिए

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<?xml-stylesheet type="text/css" href="style.svg.css" ?> 

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    ...> 
(...) 
</svg> 

चेक this link:

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

Answer 4

सरल समाधान में से एक वस्तु टैग के बजाय img टैग का उपयोग करने के

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" /> 

हालांकि, आदर्श आप html में svg एम्बेड कर सकते हैं हो सकता है। यह आपको svg फ़ाइलों को कैश करने नहीं देता है, इसलिए मैंने svg फ़ाइल को टेक्स्ट के रूप में लोड करने के लिए जावास्क्रिप्ट का उपयोग किया और कैशिंग के लिए अनुमति देने वाले डोम में डालने के लिए पाया और अभी भी एसवीजी को सीधे डोम में मिला ताकि वह सभी सीएसएस शैलियों का उपयोग कर सके आपका पृष्ठ।

Answer 5

मुझे लगता है कि यह दूसरों के बीच में सबसे आसान समाधान है:

1) यह क्लिक करने योग्य बनाने के लिए <a> में svg लपेट:

<a href="#"> 
    <object> 
     <embed src="img.svg"></embed> 
    </object> 
</a> 

2) object तत्व से सूचक घटनाओं को दूर इसलिए क्लिक वितरित किया जाएगा <a> पर सीधे:

object{ 
    pointer-events: none; 
} 

a{ 
    display: inline-block; /* or block if you need */ 
}