जावास्क्रिप्ट

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

यहाँ एसवीजी फ़ाइल इलस्ट्रेटर बाहर किक है

<?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>

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

एचटीएमएल बुनियादी दलदल है

<!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 एसवीजी की तरह कुछ का उपयोग कर करने का विरोध किया है।
यदि यह संभव है, तो तकनीक क्या है?

अद्यतन

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

स्रोत

2010-05-02 gargantuan

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

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

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

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

<!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 उस डोमेन पर होस्ट किया जाना चाहिए फ़ाइल, अन्यथा ऑब्जेक्ट का आंतरिक डोम पहुंच योग्य नहीं होगा।

स्रोत

2010-07-31 21:19:22 jbeard4

@ जेबीर्ड 4 के नोट पर एक नोट: कुछ ब्राउज़रों में इस समान मूल नीति के परिणामस्वरूप सर्वर का उपयोग करने की आवश्यकता होती है (भले ही आप कोड केवल HTML और जेएस [सर्वरसाइड] का उपयोग कर रहे हों) एक्सेस पॉलिसी तक पहुंच को रोक देगा एसवीजी – Michael

मामले में आप jQuery का उपयोग आप, क्योंकि एम्बेडेड एसवीजी दस्तावेज़ अभी तक $(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); 
});

स्रोत

2011-05-01 15:35:43 jediz

इस कोड का उपयोग करते समय, यह अन्य उत्तर उपयोगी पूरक हो सकता है: http://stackoverflow.com/a/5990945/1515819 –

उस ऑनलोड टिडबिट ने मेरी जान बचाई। JQuery के मामले में धन्यवाद – Russ

आप '$ ('# alphasvg') का बेहतर उपयोग करेंगे। '$ (विंडो) .load' के बजाय लोड'। यह आपको फ्लाई पर विशेषता 'डेटा' बदलने की अनुमति देगा – vkabachenko

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

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

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

स्रोत

2017-10-01 20:43:41

जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे