我如何确定任何的viewBox <svg> 来自JavaScript的元素？

Question

I'd like to determine the viewBox of an element (ie an SVGSVGElement) from a JavaScript function. Calling:

svgElement.getAttribute("viewBox")

works great when the viewBox is explicitly set on the element. But I cannot assume this will always be the case. For instance, I'd like my function to work on all of these tags:

(400, 100) <svg width=400 height=100></svg>
(400, 100) <svg width="400px" height="100px"></svg>
(400, 100) <svg style="width: 400px; height: 100px"></svg>
(100,  25) <svg viewBox="0 0 100 25" style="width: 400px; height: 100px"></svg>
(100,  25) <svg viewBox="0 0 100 25" width=400 height=100></svg>

(The values in parens are what the function should return in each case). I'd like to be able to do this across all browsers which support SVG and at all zoom levels.

Here's a JSFiddle with one (failed) attempt: http://jsfiddle.net/w4BTD/1/

Answer 1

The viewbox is to specify that a given set of graphics stretch to fit a particular container element. This attribute should be set when you want that behaviour.

Setting the attribute to the same size of the svg element would be a little bit redundant (if you are not going to change it ever), you would make the code smaller but it would be unnecessary or even wrong.

I would check if the viewbox attribute is set, if not, ask for the size of the svg which will be the same. The SVG spec will not help you with that...

Answer 2

This question is rather old I know.. yet I recently started to work with SVG on crossbrowser and ran into the same problem.

Given a bunch of SVG files some with viewBox and some without, every browser reacts a bit differently on displaying them.

The key part and also the part which I could not find yet on this site was, that it is possible to assume the viewBox by using the DOMParser().

With this, the missing viewBox can bet set before displaying the svg.

This is a simplified example, however it might help others who ended up having the same problem:

//Parsing a svg-string ('<svg ...></svg>') to an actual element
var tP = new DOMParser().parseFromString(s, 'image/svg+xml');

//Assuming no errors happened, this is going to be the <svg>
tS = document.importNode(tP.documentElement, true);

//Check for a viewBox attribute
var tV = tS.getAttribute('viewBox');

//If it does not exists, it gets set to the actual document dimensions which are provided by the parser
(!tV) && tS.setAttribute('viewBox', [0, 0, tP.documentElement.attributes.width.value, tP.documentElement.attributes.height.value].join(' '));