Получение оригинального SVG viewBox через javascript

Question

Наша система программно загружает файлы SVG в HTML через AJAX.Типичный файл SVG начинается с:

 <svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 65415,41616' xml:space='preserve' height='50.000cm'  width='50.000cm' xmlns:xlink='http://www.w3.org/1999/xlink

Но, как ни странно, в JavaScript, похоже, нет способа вернуть этот 'viewBox' из SVG DOM - ни в виде строки, ни в виде набора значений.Например, в Mozilla Firebug сообщает, что узел svg имеет 5 из 6 указанных нами атрибутов, а именно: xmlns, xml: space, height, width и xmlns: xlink.Но ViewBox явно отсутствует в этом списке.

Есть ли способ программно получить это значение?- где это в SVG DOM?(Мы не можем вводить сторонние библиотеки).

Answer 1

1. Перейдите на http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. Откройте консоль веб-браузера

3. Введите код:

   var svg = document.querySelector('svg');
   var box = svg.getAttribute('viewBox');
   box.split(/\s+|,/);
   

4. Наблюдайте за славным ответом:

   ["-350", "-250", "700", "500"]
   

5. В качестве альтернативы введите код:

   var box = svg.viewBox.baseVal;
   [ box.x, box.y, box.width, box.height ]
   

6. Наблюдайте за славным ответом:

   [ -350, -250, 700, 500 ]
   

Другими словами: да, вы можете получить viewBox из DOM, как в виде стандартного атрибута DOM 2 , так и в качестве явной привязки ECMASCript .

Answer 2

Вам захочется взглянуть на интерфейс SVGFitToViewBox, который задает свойство viewBox.Интерфейс для svg элементов, SVGSVGElement, расширяет этот интерфейс, так что это может быть свойство, которое вы ищете.

Answer 3

Вышеупомянутые рецепты дали мне все нули для атрибутов viewBox x, y, width и height - если, по крайней мере, один из них не был изменен программно.

У меня наконец получилось

var width = document.getElementById("mysvg").getAttribute("width");

Answer 4

Еще проще, введите идентификатор в svg, затем:

document.getElementById ( "your_ID") GetAttribute ( "Viewbox");.