SVG натуральная ширина на IE11 - PullRequest
Новая
       18

SVG натуральная ширина на IE11

0 голосов
/ 23 октября 2019

Я пытаюсь получить свойство naturalWidth из изображения SVG на IE11. Я могу получить naturalWidth и naturalHeight в Chrome, Firefox и Safari, но в IE11 он всегда возвращает 0.

Здесь - это простой Codepen, который показывает проблемы, а здесь является представлением отладки, так что вы можете выполнить его в IE11 (или вы можете просто запустить код ниже), вы увидите, что в IE11 ширина верна, но naturalWidth всегда равно 0. 

document.getElementById('mbutton').onclick = function() {
  var divNatural = document.getElementById('natural-width');
  divNatural.innerHTML = 'Natural Width: ' + document.getElementById('msvg').naturalWidth;
  
  var divWidth = document.getElementById('width');
  divWidth.innerHTML = 'Width: ' + document.getElementById('msvg').width;
}
<button id="mbutton">Get Width</button>
<div id="natural-width">0</div>
<div id="width">0</div>

<img id="msvg" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg">

Все проблемы, связанные с этим моментом ожидания ожидания загрузки изображения, что здесь не так, является ли это известной проблемой в IE11? Есть ли обходной путь?

1 Ответ

0 голосов
/ 23 октября 2019

Спасибо @Robert Longson, я прочитал измерение из файла SVG. Это не идеальная и надежная реализация, но она вполне подходит для моих нужд. Благодаря этому я могу получить ширину и высоту SVG во всех браузерах: 

// Load SVG into an image
var svgImage = new Image();
svgImage.onload = function () {
    // We need to attach the Image to the DOM temporarily so we can read its size on IE
    svgImage.style.opacity = 0;
    svgImage.style.position = 'fixed';
    document.body.appendChild(svgImage);

    // Save SVG width and height.              
    scope._svgHeight = svgImage.naturalHeight;
    scope._svgWidth = svgImage.naturalWidth;

    if (scope._svgHeight === 0 || scope._svgWidth === 0) {
        // On IE, naturalWidth and naturalHeight are 0 so try parsing the SVG string
        //  and see if it has width and height attributes.
        var parser = new DOMParser();
        var doc = parser.parseFromString(value, "image/svg+xml");

        if (doc && doc.firstChild && doc.firstChild.tagName === 'svg') {
            // Try getting the SVG dimensions from the width/height attributes
            var w = doc.firstChild.getAttribute('width');
            var h = doc.firstChild.getAttribute('height');
            var box = doc.firstChild.getAttribute('viewBox');

            // This regex checks if we have any non valid characters in the width (we need the dimensions
            //  to only have 'px' or no unit at all)
            var regex = /[^\d.px]/;
            if (w && h && !regex.test(w) && !regex.test(h)) {
                scope._svgWidth = parseFloat(w);
                scope._svgHeight = parseFloat(h);
            }
            else if(box) {
                // Try to use the viewbox
                var dim = box.split(' ');
                scope._svgWidth = parseFloat(dim[2]);
                scope._svgHeight = parseFloat(dim[3]);
            }
            else {
                // Fallback to width (won't work correctly in all cases)
                scope._svgWidth = svgImage.width || svgImage.offsetWidth;
                scope._svgHeight = svgImage.height || svgImage.offsetHeight;
            }
        }
        // If SVG could not be parsed fallback to width (won't work correctly in all cases)
        else {
            scope._svgWidth = svgImage.width || svgImage.offsetWidth;
            scope._svgHeight = svgImage.height || svgImage.offsetHeight;
        }
    }

    document.body.removeChild(svgImage);

    // At this point scope._svgHeight and scope._svgWidth have the width and height of the SVG
};
svgImage.src = 'data:image/svg+xml,' + encodeURIComponent(svgString);
...