Получить размер SVG-графики с помощью JavaScript

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-файлы из Open Graphics Library для тестирования. Есть ли способ получить размер SVG с помощью JavaScript? Или, может быть, я должен просто посмотреть на файл svg xml, чтобы узнать размер по верхнему тегу svg?

Answer 1

См. http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2

Можно получить доступ к SVG DOM, на который ссылается объект HTML:, если файл SVG находится в одном домене (в противном случае это будет уязвимостью в безопасности. Если у вашего тега объекта есть id = "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 с помощью JavaScript?

Нет и да.

нет

No:

JavaScript не сможет получить доступ к содержимому файла SVG, который находится в браузере.

Так что было бы невозможно иметь страницу, содержащую произвольное изображение SVG, а затем заставить JavaScript определять что-либо из самого файла SVG.

Единственные данные, которые JS может получить к нему доступ, которые содержатся в DOM страницы: исходная разметка плюс любые связанные с JS модификации DOM. Вы можете получить доступ к атрибутам элемента object и дочерним узлам, но это не даст вам больше ничего, чем вы можете увидеть, если сами посмотрите на разметку страницы.

Да

JS (в современных браузерах) может анализировать любую строку XML в DOM и затем получать доступ к содержимому с помощью методов на основе DOM.

Вы можете получить содержимое файла SVG, выполнив запрос в стиле xmlHttpRequest (т. Е. JS выполняет HTTP GET для URL файла SVG). Тогда у JS будет полная XML-строка SVG-файла, и вы сможете получить доступ ко всему, что захотите.

> Или, может быть, я должен просто взглянуть на XML-файл SVG, чтобы узнать размер из верхнего тега SVG?

Это было бы гораздо более возможным.

Единственное решение на основе JS потребовало бы, чтобы JS выполнил запрос GET по URL-адресу файла SVG (как указано выше), что вряд ли осуществимо - каждая загрузка страницы может привести к двойной загрузке каждого файла SVG и синтаксическому анализу. XML SVG в DOM от JS может быть слишком ресурсоемким.

Если JS извлекает XML-контент SVG и анализирует его в DOM для получения только измерений изображения, это немного излишне. Это вполне возможно, но, как правило, не практично.

Запрос на серверный контент 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 по используя JavaScript?

ДА

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 или любого другого файла без заминки. Конфигурация сервера - единственное, что может помешать.