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's answer，将代码从

    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/ 在任何地方都可以使用，并且 resize 可以在 Chrome 和 Firefox 中使用，比例为 100 到 50

编辑：设置宽度/高度 CSS 样式，而不是设置宽度/高度属性。

---

你在属性/风格层面没有问题：试试这个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
};

Answer 2

不知道为什么它会间歇性工作，非常奇怪和好奇是否有更好的答案。

但是...替换：

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

与：

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

在 Chrome 的屏幕上正确呈现它，但是我怀疑设置 SVG 的样式是正确的方法。