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

Answer 1

См. http: //dev.opera. ком / статьи / просмотр / SVG-эволюция-не-революция /? страница = 2

Можно получить доступ к DOM SVG, на который ссылается объект 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?

Нет и да.

Нет:

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

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

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

Да:

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

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

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

Это было бы гораздо более осуществимо.

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

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

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