Question

我在<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是从正确的尺寸切断的。

Answer 1

我想知道为此调整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/

Answer 2

SVG不会缩放，因为它没有定义viewBox。 viewBox告诉浏览器内容的尺寸是什么。没有它，就无法确定应该按比例放大或缩小到多少。

这是svg-edit的失败。理想情况下，它确实应该添加一个。

您可以尝试将SVG加载到Inkscape或其他应添加viewBox的SVG编辑器中。或者，您可以根据Ian的回答手动添加一个。

如何调整大svg的大小以适应div

2 个答案: