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

Наша система загружает 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? (Мы не можем внедрять сторонние библиотеки).

Ответ 1

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

Ответ 2

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

Введите код:

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

Наблюдайте за славным ответом:
```
["-350", "-250", "700", "500"]
```

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

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

Наблюдайте за славным ответом:
```
[ -350, -250, 700, 500 ]
```

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

Ответ 3

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

document.getElementById("your_id").getAttribute("viewBox");

Ответ 4

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

Я наконец преуспел с

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