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

> Есть ли способ получить размер svg с помощью JavaScript?

Нет и да.

Нет:

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

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

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

Да:

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

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

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

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

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

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

Лучше всего будет запросить серверную часть XML-содержимого SVG, определить подходящую ширину и высоту, а затем динамически добавить атрибуты width и height перед возвратом разметки в браузер.

См. 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%», поэтому вам необходимо тщательно проанализировать их.

Is there any way to get svg's size by using 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 или любого другого файла. Конфигурация сервера - единственное, что может помешать.

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 находится в том же домене (подробности здесь). Рабочий пример

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

async function start() {
  // here is example url with embeded svg but you can use any url
  let svgURL = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='120' width='220'%3E%3Cellipse cx='110' cy='60' rx='100' ry='50' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E";
  
  let img = await getImage(svgURL);
  let w = img.width;
  let h = img.height; 
  
  // print
  console.info({w,h});
  pic.src = svgURL;
}

start();

<img id = "pic">