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

我在

中有以下div

---

但是svg与正确的大小不符

我想调整一下这个视图框，比如

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

---

JSIDLE

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

这是svg编辑的一种失败。理想情况下，它真的应该增加一个

---

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

您可以发布一个吗？还告诉我们Snap.load（），它看起来是异步的吗？这里有一篇老文章讨论了使用Snap在div中加载svg的问题。奇怪的是，我得到了一个错误：属性preserveSpectratio=“xMaxYmax”的值无效。我认为这种情况实际上是错误的，所以我想知道浏览器使用区分大小写的方式及其处理方式是否有轻微的变化。具有有效值。似乎不起作用？如果我更改div width/height，则显示的图像大小不受影响。这取决于您正在更改的内容，问题的标题有点模糊（因为问题指定了内部宽度/高度）。您是否试图使其具有响应性，如果是，请尝试将纸张的宽度/高度设置为100%，例如，如果您是指其他内容，则可能值得发布一个新问题。@johnktejik您很久没有问过这个问题，但没有人回答。该值必须是驼峰大小写，因此“Y”后面的“m”必须是类似“xMaxYMax”的大写字母。能否添加一些示例代码。。如何调整svg元素的大小是我最大的挑战

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

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