21

我有以下 div 里面<body>。

<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 从正确的大小被切断。

4

2 回答 2

32

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

于 2014-01-14T11:16:06.717 回答
6

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

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

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

于 2014-01-14T16:39:52.017 回答