元素维度在DOM中更新,但更改未显示onresize

Question

我正在尝试调整svg元素的大小以在浏览器中尽可能大,同时保持100x50的比例.当我检查对DOM所做的更改时,一切都检查得很好,但更新的维度似乎没有呈现.我该如何解决这个问题？

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;
    }
}

---

编辑: sq2的答案,它改变了代码

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

至

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

提供了修复,但在Firefox中仍然存在问题.

Answer 1

更新: 此http://jsfiddle.net/SE6d3/70/随处可见,调整大小适用于Chrome和Firefox,比例为100到50

编辑:设置宽度/高度CSS样式,而不是设置宽度/高度属性.

你在attr/style级别没有问题:试试这个http://jsfiddle.net/SE6d3/27/ 如果firefox和chrome都正常工作.

我认为你的问题在从窗口获取宽度/高度的水平.试试这个方法:

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

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