एसवीजी ग्राफिक्स जावास्क्रिप्ट द्वारा

Question

html पृष्ठ में एक svg ग्राफिक्स जोड़ने के लिए के आकार जाओ, यह वस्तु टैग का उपयोग करने के लिए इस तरह लपेट के लिए आम है:

<object id="svgid" data="mysvg.svg" type="image/svg+xml" 
    wmode="transparent" width="100" height="100"> 

this browser is not able to show SVG: <a linkindex="3" 
href="http://getfirefox.com">http://getfirefox.com</a> 
is free and does it! 
If you use Internet Explorer, you can also get a plugin: 
<a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html"> 
http://www.adobe.com/svg/viewer/install/main.html</a> 

</object> 

आप चौड़ाई उपयोग नहीं करते हैं और ऊंचाई में जिम्मेदार बताते हैं ऑब्जेक्ट टैग, एसवीजी पूर्ण आकार में प्रदर्शित किया जाएगा। आम तौर पर मुझे परीक्षण के लिए ओपन ग्राफिक्स लाइब्रेरी से एसवीजी फाइलें मिलती हैं। जावास्क्रिप्ट का उपयोग करके svg के आकार को पाने का कोई तरीका है? या शायद मुझे शीर्ष svg टैग से आकार का पता लगाने के लिए svg xml फ़ाइल को देखना चाहिए?

Answer 1

> क्या जावास्क्रिप्ट का उपयोग करके svg के आकार को पाने का कोई तरीका है?

नहीं और हाँ।

नहीं:

जावास्क्रिप्ट एसवीजी फ़ाइल सामग्री है कि ब्राउज़र में बैठे हैं का उपयोग करने में सक्षम नहीं होगा।

तो एक पृष्ठ मनमाने ढंग से एसवीजी छवि युक्त होना संभव नहीं होगा और फिर जावास्क्रिप्ट एसवीजी फ़ाइल से कुछ भी निर्धारित करेगा।

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

हाँ:

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

आप एक xmlHttpRequest-style अनुरोध जारी करके एसवीजी फ़ाइल सामग्री प्राप्त कर सकते हैं (यानी जेएस एसवीजी फ़ाइल के यूआरएल पर एक HTTP GET करता है)। जेएस के पास एसवीजी फ़ाइल की पूर्ण एक्सएमएल स्ट्रिंग होगी और फिर आप अपनी पसंद की किसी भी चीज़ तक पहुंच सकते हैं।

> या शायद मुझे शीर्ष svg टैग से आकार का पता लगाने के लिए svg xml फ़ाइल को देखना चाहिए?

यह अब तक और अधिक व्यवहार्य होगा।

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

जेएस एसवीजी की एक्सएमएल सामग्री को पुनः प्राप्त करने और इसे केवल छवि आयामों को पुनर्प्राप्त करने के लिए डीओएम में पार्स होने के कारण थोड़ा अधिक है। यह पूरी तरह से संभव है, लेकिन आम तौर पर व्यावहारिक नहीं है।

एसवीजी के एक्सएमएल सामग्री सर्वर-साइड को क्वेरी करना, उचित चौड़ाई और ऊंचाई निर्धारित करना और फिर गतिशील रूप से width और height ब्राउज़र में मार्कअप लौटने से पहले विशेषताओं को जोड़ना आपकी सबसे अच्छी शर्त होगी।

Answer 2

देखें http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2

यह एसवीजी डोम एक HTML द्वारा संदर्भित तक पहुँच प्राप्त करना संभव है: वस्तु जब तक एसवीजी फ़ाइल एक ही डोमेन पर है (अन्यथा यह एक सुरक्षा भेद्यता होगा।अपने वस्तु टैग आईडी है, तो = "myobj" आप क्या करेंगे:

svgelem.getAttribute("width") 
svgelem.getAttribute("height") 

ध्यान दें कि इन विशेषताओं तरह बातें हो सकता है:

var obj = document.getElementById("myobj"); // reference to the object tag 
var svgdoc = obj.contentDocument; // reference to the SVG document 
var svgelem = svgdoc.documentElement; // reference to the SVG element 

तो फिर तुम से svg तत्व की चौड़ाई/ऊंचाई तक पहुँच प्राप्त कर सकते हैं "100 पीएक्स", "300", "200em", "40 मिमी", "100%" ताकि आपको ध्यान से इसका विश्लेषण करने की आवश्यकता हो।

Answer 3

क्या जावास्क्रिप्ट का उपयोग करते हुए द्वारा svg का आकार प्राप्त करने का कोई तरीका है?

हाँ

var filesize = function(url, requestHandler) { 
    var requestObj = new XMLHttpRequest(); 
    requestObj.open('head', address, true); 
    requestObj.onreadystatechange = callback; 
    requestObj.send(null); 
}; 

अब एक हैंडलिंग समारोह:

var requestHandler = function(result) { 
    if (this.readyState === 1) { 
     this.abort(); 
    } 
    return this.getResponseHeader("Content-length"); 
}; 

var size = fileSize("http://whatever.org/someSVGFile.svg", requestHandler); 
alert(size); 

कि बिना किसी बाधा के अपने svg का फ़ाइल आकार या किसी अन्य फ़ाइल लौटना चाहिए। सर्वर कॉन्फ़िगरेशन एकमात्र चीज है जो हस्तक्षेप कर सकती है।