मैं होवर पर एक एसवीजी छवि का रंग कैसे बदल सकता हूं?

Question

संभव डुप्लिकेट:
Changing SVG image color with javascript

मैं जब मैं उस पर होवर एक एसवीजी छवि का भरण बदलना चाहते हैं।

अभी मेरे पास इलस्ट्रेटर से एसवीजी तक निर्यात किया गया एक काला प्रश्न चिह्न है। मैं अपने पेज को आईएमजी टैग के साथ रख सकता हूं और यह ठीक दिखाता है, हालांकि मुझे नहीं पता कि कोड में रंग कैसे बदला जाए।

Answer 1

एसवीजी फ़ाइलें संशोधित किया जा सकता सीधे जावास्क्रिप्ट से, यानी "छवि" के गुण डीओएम के भीतर से पहुंच योग्य हैं। ढेर अतिप्रवाह से इस पोस्ट पर

देखो: modify stroke and fill of svg image with javascript

ऐसा नहीं है कि ऐसा करने के लिए याद रखना महत्वपूर्ण है, तो आप, आम एचटीएमएल * < img/> * टैग में एसवीजी फ़ाइल संलग्न नहीं कर सकता का उपयोग करें * < svg> * ... ** < /svg> पोस्ट में दिखाए गए अनुसार।

संपादित करें: svg on w3schools

मैं w3schools का एक लिंक जोड़ा ताकि आप svg वस्तु का अधिक गुण देख सकते हैं

Have Fun

Answer 2

यदि आप अपना कोड पोस्ट कर सकते हैं, तो शायद हम आपके लिए समस्या निवारण कर सकते हैं। इस निम्नलिखित

प्रयास करें: http://tutorials.jenkov.com/svg/svg-and-css.html

वैकल्पिक रूप से (एसवीजी के लिए विशेष नहीं), विभिन्न छवियों के साथ कोड के इस प्रकार का उपयोग करें:

<img src="image1.svg" 
onmouseover="this.src='image2.svg'" 
onmouseout="this.src='image1.svg'"> 

लाइव डेमो: http://jsfiddle.net/JNChw/

Answer 3

आप svg में हॉवर प्रभाव ऐसा करने के लिए आप नहीं करना चाहिए की जरूरत है < img> टैग का उपयोग करें। इसके बजाय svg को < iframe>, < ऑब्जेक्ट> या < एम्बेड> टैग के साथ संदर्भित करें। यदि आप http GET अनुरोध को सहेजना चाहते हैं तो आप HTML दस्तावेज़ में svg मार्कअप इनलाइन डाल सकते हैं।

यहां एक उदाहरण है जो एक साधारण भरने वाला होवर प्रभाव inside an svg, और another one दिखाता है (थोड़ा अधिक जटिल जो फ़िल्टर का उपयोग करके होवर पर रूपरेखा बनाता है)। वैसे भी, यह मूल रूप से लागू करने के बारे में है: भरने के रंग को सेट करने के लिए होवर सीएसएस नियम।

svg का उपयोग करने के सभी उपरोक्त तरीकों के साथ एक उदाहरण here देखा जा सकता है।