フル・ビューポートでのSVG画像

Question

ヨーロッパのイメージを描くSVGのこの種のねじれビットがあります。それはたくさんの不愉快な行為の結果です。私は、SVGと非常に良くないんだけど、どちらかの必需品で...

p27.eu

、コードはこれです：

<script type="text/javascript"> 
<!-- compute the image dimensions, proposed code --> 
var w = window; 
var d = document; 
var e = d.documentElement; 
var g = e.getElementsByTagName('body')[0]; 
var x = w.innerWidth || e.clientWidth || g.clientWidth; 
var y = w.innerHeight|| e.clientHeight|| g.clientHeight; 
var eurlen = Math.min(x, y); 
<!-- end proposed code --> 
</script> 
<svg 
    id="europe-svg" 
    display: block 
    align: xMidYMid 
    width="300%" 
    height="300%"> 
    <g 
id="layer1" 
transform="translate(-107.76319,-174.21562)"> 
<path>...</path> <!-- one of these for each country --> 
<rect 
    style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8.37237263;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" 
    id="rect10148" 
    width="452.38409" 
    height="447.94937" 
    x="106.52205" 
    y="174.79648" /> 
    </g> 
</svg> 

私は画像がフルフレームを表示したいです。私は望む長さを計算することができます（上記の提案されたコードを参照してください）。

しかし、私は、この悪夢の忌み嫌いをビューポートのサイズに合わせることができません。まず、これは、svgの高さ/幅と（最後の）矩形の高さ/幅にjavascript変数の値を挿入する方法がわからないためです。しかし、私がこれらの値を手動で変更すると、イメージが私には意味をなさせるように全く反応しないからです。

機械で生成されたSVGが手作業で修正され継承されるのを避けることはできますか？

Answer 1

あなたが作るために必要なだけのカップルのステップがあります：

もSVG完全な幅と高さを作り、ここにCSSだ、コンテナいっぱいの幅と高さを作成します。

#europe { 
    width: 100%; 
    height: 100%; 
} 
svg { 
    width: 100%; 
    height: 100%; 
} 

その後、削除svg要素のwidth属性とheight属性を追加し、viewBox属性を追加して、svgの内容と一致させてください（図面のサイズについてわからないので、開始するにはviewBox="0 0 400 400"のように入力してください）。それはああ、あなたが

を始める、と体からマージンを削除します：

body { 
    margin: 0 
}