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

Question

I have the following div inside <body> . 我在<body>里面有以下div。

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

I want to fit a 640X480 svg inside this div. 我想在这个div中安装一个640X480 svg。 I have tried this: 我试过这个：

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

But the svg is cut off from the right size. 但svg与正确尺寸相隔。

Answer 1

I was wondering about adjusting the viewBox for this, so something like... 我想知道为此调整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/ jsfiddle http://jsfiddle.net/9zRR8/5/

Answer 2

The SVG will not scale because it does not have a viewBox defined. SVG不会缩放，因为它没有定义viewBox。 The viewBox tells the browser what the dimensions of the content are. viewBox告诉浏览器内容的尺寸是什么。 Without it, there is no way to determine how much it should be scaled up or down to fit. 没有它，就无法确定它应该按比例放大或缩小。

This is kind of a failing of svg-edit. 这是svg-edit的失败。 It really should be adding one, ideally. 理想情况下，它确实应该添加一个。

What you could try is loading the SVG into Inkscape or another SVG editor which should add a viewBox. 您可以尝试将SVG加载到Inkscape或其他应添加viewBox的SVG编辑器中。 Alternatively, you could add one manually, as per Ian's answer. 或者，您可以根据Ian的回答手动添加一个。

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

问题描述

2 个解决方案

解决方案1
30 已采纳 2014-01-14 11:16:06

解决方案2
6 2014-01-14 16:39:52

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

问题描述

2 个解决方案

解决方案1 30 已采纳 2014-01-14 11:16:06

解决方案2 6 2014-01-14 16:39:52

解决方案1
30 已采纳 2014-01-14 11:16:06

解决方案2
6 2014-01-14 16:39:52