जावास्क्रिप्ट के साथ एसवीजी तत्वों का उपयोग कैसे करें

Question 1

मैं एसवीजी के साथ गड़बड़ कर रहा हूं और मुझे उम्मीद थी कि मैं इलस्ट्रेटर में एसवीजी फाइलें बना सकता हूं और जावास्क्रिप्ट के साथ तत्वों का उपयोग कर सकता हूं।

यहाँ एसवीजी फ़ाइल इलस्ट्रेटर को किक करता है (यह उस फ़ाइल की शुरुआत में कबाड़ का एक लोड जोड़ने के लिए भी लगता है जिसे मैंने हटा दिया है)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
     xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
    c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
    L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
    l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
    l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 
    194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 
    163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
    l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
    l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>

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

HTML बोग बेसिक है

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>

    </body>
</html>

मुझे लगता है कि यह वास्तव में दो प्रश्न हैं।

क्या राफेल या jQuery SVG जैसी किसी चीज़ का उपयोग करने का विरोध करते हुए इसे इस तरह से करना संभव है।
यदि यह संभव है, तो तकनीक क्या है?

अपडेट करें

फिलहाल, मैंने एसवीजी फ़ाइल बनाने के लिए इलस्ट्रेटर का उपयोग किया है, और मैं राफेल जेएस का उपयोग पथ बनाने के लिए और बस एसवीजी फ़ाइल से बिंदु डेटा की प्रतिलिपि बनाने और इसे path()फ़ंक्शन में चिपकाने के लिए कर रहा हूं । मैन्युअल रूप से (मेरे ज्ञान में) निषेधात्मक रूप से बिंदु डेटा को कोड करके, जैसे कि नक्शे के लिए आवश्यक जटिल पथ बनाना हो सकता है।

Question 2

क्या राफेल या jQuery SVG जैसी किसी चीज़ का उपयोग करने का विरोध करते हुए यह इस तरह से संभव है?

निश्चित रूप से।

यदि यह संभव है, तो तकनीक क्या है?

यह एनोटेट कोड स्निपेट काम करता है:

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml"
         id="alphasvg" width="100%" height="100%"></object>

        <script>
            var a = document.getElementById("alphasvg");

            // It's important to add an load event listener to the object,
            // as it will load the svg doc asynchronously
            a.addEventListener("load",function(){

                // get the inner DOM of alpha.svg
                var svgDoc = a.contentDocument;
                // get the inner element by id
                var delta = svgDoc.getElementById("delta");
                // add behaviour
                delta.addEventListener("mousedown",function(){
                        alert('hello world!')
                }, false);
            }, false);
        </script>
    </body>
</html>

ध्यान दें कि इस तकनीक की एक सीमा यह है कि यह समान-मूल नीति द्वारा प्रतिबंधित है, इसलिए फ़ाइल के alpha.svgरूप में एक ही डोमेन पर होस्ट किया जाना चाहिए .html, अन्यथा ऑब्जेक्ट का आंतरिक डोम दुर्गम होगा।

इस HTML को चलाने के लिए महत्वपूर्ण बात , आपको IIS, Tomcat जैसे वेब सर्वर पर होस्ट HTML फ़ाइल की आवश्यकता है

Question 3

यदि आप jQuery का उपयोग करते हैं तो आपको प्रतीक्षा करने की आवश्यकता है $(window).load, क्योंकि एम्बेडेड SVG दस्तावेज़ अभी तक लोड नहीं किया जा सकता है$(document).ready

$(window).load(function () {

    //alert("Document loaded, including graphics and embedded documents (like SVG)");
    var a = document.getElementById("alphasvg");

    //get the inner DOM of alpha.svg
    var svgDoc = a.contentDocument;

    //get the inner element by id
    var delta = svgDoc.getElementById("delta");
    delta.addEventListener("mousedown", function(){ alert('hello world!')}, false);
});

Question 4

यदि आप <img>एसवीजी के लिए एक टैग का उपयोग कर रहे हैं , तो आप इसकी सामग्री (जहाँ तक मुझे पता है) में हेरफेर नहीं कर सकते।

जैसा कि स्वीकृत उत्तर दिखाता है, का उपयोग <object>करना एक विकल्प है।

मुझे हाल ही में इसकी आवश्यकता थी और gulp-injectअपने gulp बिल्ड के दौरान एक एसवीजी फ़ाइल की सामग्री को सीधे HTML दस्तावेज़ में एक <svg>तत्व के रूप में इंजेक्ट करने के लिए , जो तब सीएसएस चयनकर्ताओं और querySelector/ के साथ काम करना बहुत आसान है getElementBy*।