Получить размер графики SVG с помощью JavaScript
-
04-07-2019 - |
Вопрос
Чтобы добавить графику 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?
Нет правильного решения
Другие советы
См. 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%"; поэтому вам нужно тщательно разобрать его.
> Есть ли способ получить размер 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
атрибуты перед возвратом разметки в браузер будет лучшим выбором.
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 находится в одном домене (подробности здесь ).
Есть ли способ получить размер 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 или любого другого файла.Конфигурация сервера — единственное, что может помешать.