web-dev-qa-db-ja.com

大きなsvgをdiv内に収まるようにサイズ変更する方法

<body>内に次のdivがあります。

<div style="width:320px; height:480px;">
    <svg id="svg1"></svg>            
</div>

このdiv内に640X480 svgを適合させたい。私はこれを試しました：

var paper=Snap("#svg1");
Snap.load("somesvg.svg",function(f){ 
 paper.append(f);
 }); 
 paper.attr({ 
 width:320, height:480
 })

しかし、svgは適切なサイズから切り離されています。

javascripthtmlcsssvgsnap.svg
20
naheed

これのためにviewBoxを調整することについて疑問に思っていたので、次のようなもの...

<div style="width:320px; height:480px;">
    <svg id="svg1" width="100%" height="100%" viewBox="0 0 640 480" preserveAspectRatio="xMaxYMax"></svg>
</div>

jsfiddle http://jsfiddle.net/9zRR8/5/

30
Ian

SVGにはviewBoxが定義されていないため、スケーリングされません。 viewBoxは、コンテンツのサイズをブラウザに通知します。それがなければ、どれだけ拡大または縮小してフィットさせる必要があるかを決定する方法はありません。

これはsvg-editの一種の失敗です。理想的には1つ追加する必要があります。

あなたが試すことができるのは、SVGをInkscapeまたはviewBoxを追加する必要がある別のSVGエディタにロードすることです。または、イアンの答えに従って、手動で追加することもできます。

6
Paul LeBeau