Question

I’m trying to resize a svg element to fit as large as possible in the browser while maintaining a 100×50 scale. When I inspect the changes made to the DOM, everything checks out fine, but the updated dimensions don’t seem to render. How do I fix this problem?

http://jsfiddle.net/Wexcode/SE6d3/show/

var svg = document.getElementById("svg");
resize.call(svg);

window.onresize = function() {
    resize.call(svg);
}

function resize() {    
    this.setAttribute("width", scale(100));
    this.setAttribute("height", scale(50));

    function scale(value) {
        return Math.min(window.innerWidth / 100, window.innerHeight / 50) * value;
    }
}

---

Edit: sq2’s answer, which changes the code from

    this.setAttribute("width", scale(100));
    this.setAttribute("height", scale(50));

to

    this.style.width = scale(100);
    this.style.height = scale(50);

provides a fix, but is still broken in Firefox.

Answer 1

UPDATE:
Also this http://jsfiddle.net/SE6d3/70/ is working everywhere and resize is working in Chrome and Firefox with proportions 100 to 50

Edit: Rather than setting the width/height attributes, set the width/height CSS style.

---

You have no problems at attr/style level: try this http://jsfiddle.net/SE6d3/27/
All working normal if firefox and chrome.

I think your problem on level of getting width/height from window.
Try this methods:

getClientHeight = function(){
    return document.compatMode=='CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight;
};

getClientWidth = function(){
  return document.compatMode=='CSS1Compat' ? document.documentElement.clientWidth : document.body.clientWidth
};