3

我正在尝试调整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 中仍然存在问题。

4

2 回答 2

5

更新： 此外，这个http://jsfiddle.net/SE6d3/70/在任何地方都可以使用，并且 resize 可以在 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
};
于 2012-07-27T17:09:07.160 回答
1

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

但是...替换：

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

和：

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

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

于 2012-07-24T02:24:36.757 回答