الحصول على حجم الرسومات SVG طريق جافا سكريبت

Question

لإضافة الرسومات svg في صفحة html ، من الشائع استخدام كائن الوسم التفاف مثل هذا:

<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 حجم باستخدام جافا سكريبت ؟ أو ربما يجب أن ننظر إلى svg ملف xml لمعرفة حجم من أعلى svg علامة ؟

Answer 1

HTTP: //dev.opera. كوم / المواد / رأي / SVG-تطور-لا-الثورة /؟ الصفحة = 2

ومن الممكن للوصول إلى DOM SVG المشار إليها من قبل HTML: الاعتراض طالما أن ملف SVG على نفس المجال (وإلا فإن هذا سيكون ثغرة أمنية إذا علامة كائن لديه معرف = "myobj" لك. ستفعل:

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 في عرض / ارتفاع حسب:

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

لاحظ أن هذه الصفات قد تكون أشياء مثل "100px"، "300"، "200em"، "40MM"، "100٪" لذلك تحتاج إلى تحليل بعناية.

Answer 2

> هل هناك أي طريقة للحصول على svg حجم باستخدام جافا سكريبت ؟

لا ونعم.

No:

جافا سكريبت لن تكون قادرة على الوصول إلى SVG محتويات الملف التي تجلس في المتصفح.

لذلك لن يكون من الممكن أن يكون صفحة تحتوي التعسفي SVG صورة ومن ثم يكون جافا سكريبت تحديد أي شيء من ملف SVG نفسها.

البيانات الوحيدة شبيبة يمكن الوصول إلى هذا الواردة في الصفحة دوم:الأصلي العلامات بالإضافة إلى أي JS-التعديلات ذات الصلة إلى DOM.يمكنك الوصول إلى object عنصر سمات و سليل العقد ، ولكن ذلك لن تعطيك رؤية أي شيء أكثر من ما يمكنك أن ترى إذا نظرت إلى صفحة العلامات نفسك.

نعم:

شبيبة (في المتصفحات الحديثة) يمكن تحليل أي سلسلة XML إلى DOM ومن ثم الوصول إلى المحتوى باستخدام DOM-based الأساليب.

هل يمكن الحصول على SVG محتويات الملف قبل إصدار مدعوم على غرار الطلب (أيشبيبة ينفذ HTTP الحصول على ملف SVG URL).شبيبة عندئذ SVG ملف كامل سلسلة XML ومن ثم يمكنك الوصول إلى أي شيء تريد.

> أو ربما يجب أن ننظر إلى svg ملف xml لمعرفة حجم من أعلى svg علامة ؟

هذا من شأنه أن يكون أكثر جدوى حتى الآن.

فقط JS-على أساس الحل يتطلب شبيبة لأداء لطلب الحصول على ملف SVG URL (على النحو الوارد أعلاه) ، والتي من غير المرجح أن يكون ممكنا - كل تحميل الصفحة قد يؤدي إلى ضعف-تحميل كل ملف SVG ، تحليل SVG XML إلى دوم شبيبة قد يكون أكثر استهلاكا للموارد.

بعد شبيبة استرداد SVG XML المحتوى وتحليل ذلك إلى دوم لاسترداد فقط أبعاد الصورة هو مبالغة بعض الشيء.فمن الممكن تماما ، ولكن عموما ليس من العملي.

الاستعلام عن SVG XML المحتوى من جانب الخادم ، وتحديد مناسبة العرض والارتفاع ثم حيوي إضافة width و height سمات قبل عودته العلامات إلى المتصفح سيكون أفضل رهان.

Answer 3

على ES6 : في طريق async/await يمكنك القيام بذلك في مثل تسلسل الطريق

async function getImage(url) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

وواستخدام الدالة أعلاه:

let img = await getImage("yourimage.svg");
let w = img.width;
let h = img.height; 

ويمكنك استخدامه طالما أن ملف SVG هو على نفس المجال (تفاصيل هنا ).

Answer 4

هل هناك أي طريقة للحصول على 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 أو أي ملف آخر دون وجود عوائق.تكوين الملقم هو الشيء الوحيد الذي قد تتداخل.