0

そのため、Web アプリをレスポンシブにするときに問題が発生しました。幅のサイズが変更されたときに SVG が適応するようにすることはできましたが、高さで問題が発生しました。

高さのサイズ変更について私が思いついた最善の解決策は、次の js/jQuery コードです。

        function updateWindow(){
            var y = (($(window).height()));
            svgMap.style.height=y;
        }
        updateWindow();
        window.onresize = updateWindow;

これが行うことは、SVG ビューポートの高さをウィンドウの高さと同じに設定することです。これは、ブラウザ ウィンドウの高さで SVG を中央に配置するという意味で機能します。それほど優れているわけではありませんが、モバイルデバイスを台無しにし、ほとんど奇妙なトップマージンを追加します. また、「y」に1より大きい値を掛けない限り、SVGをわずかに小さくします。ただし、そうするとマージンとトップのギャップが大きくなります。なんて面倒..

ここでデモを見ることができます: http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils.html

高さの中心が変更されていないデモ: http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils%20-%20Copy.html

<object>要約すると、SVG をタグ内で水平方向と垂直方向の中央に配置するにはどうすればよいでしょうか。また、SVG マップ自体がラッパー コンテナーを満たすようにしたいと考えています。

どんな助けでも大歓迎です、ありがとう。

編集:だから、親の高さにちょうど合うようにすることをあきらめました..代わりに、高さが小さすぎてページのオーバーフローが発生する場合にユーザーに警告を表示するJSをいくつか書きました。また、各ページにインライン CSS を追加し、メディア クエリを追加することで、スタイルが完璧になるようにしました。

4

1 に答える 1

0

SVG の幅と高さを 100% に設定した場合、つまり:

<svg width="100%" height=="100%">...

SVG が入っているコンテナのサイズを変更するだけです。「xMidYMid meet」の preserveAspectRatio 設定は、垂直方向の中央に配置する必要があります。

于 2013-07-31T08:40:06.647 に答える