3

svg100x50 のスケールを維持しながら、ブラウザにできるだけ大きく収まるように要素のサイズを変更しようとしています。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/はどこでも機能し、サイズ変更は 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 に答える