Obtaining an original SVG viewBox via javascript

Our system loads SVG files programmatically into HTML via AJAX. A typical SVG file begins with:

 <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

But strangely in JavaScript there seems to be no way of getting this ‘viewBox’ back from the SVG DOM – either as a string, or as a set of values. Under Mozilla, for example, firebug reports that the svg node has 5 of the 6 attributes we specifiy – namely: xmlns, xml:space, height, width and xmlns:xlink. But ViewBox is conspicuously missing from this list.

Is there anyway to programmatically retrieve this value? – where is it in the SVG DOM? (We cannot introduce 3rd party libraries).

  1. Go to http://phrogz.net/SVG/svg_in_xhtml5.xhtml
  2. Open your web browser console
  3. Type the code:

    var svg = document.querySelector('svg');
    var box = svg.getAttribute('viewBox');
    box.split(/\s+|,/);
    
  4. Observe the glorious response:

    ["-350", "-250", "700", "500"]
    
  5. Alternatively, type the code:

    var box = svg.viewBox.baseVal;
    [ box.x, box.y, box.width, box.height ]
    
  6. Observe the glorious response:

    [ -350, -250, 700, 500 ]
    

In other words: yes, you can get the viewBox from the DOM, both as a standard DOM 2 attribute as well as an explicit ECMASCript binding.

You’ll want to take a look at the SVGFitToViewBox interface, which specifies the viewBox property. The interface for svg elements, SVGSVGElement, extends that interface, so this property is available on the element objects:

const svgElement = document.getElementById("example-svg");
const {x, y, width, height} = svgElement.viewBox.baseVal;

Even easier, put an id in your svg then :

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

Above receipes gave me all zeros for the x, y, width and height viewBox attributes — unless at least one of them was changed programmatically.

Read More:   How to get specific currency symbol(rupee symbol in my case) in angular js instead of the default one (dollar $ symbol)

I finally succeded with

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


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts