logo标签列表

如何调整大型SVG以适应DIV大小

javascripthtmlcsssvgsnap.svg
21

我在 <body> 中有以下的

元素。

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

我想将一个640X480的SVG适配到这个div里面。我已经尝试过以下方法：

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

但是 SVG 被从右侧裁剪了。

1
你能发布一个jsFiddle吗？另外告诉我们Snap.load()的情况，它看起来是异步的？ - Kyle Weller
1
http://jsfiddle.net/nahid/9zRR8/3/ - naheed
这是一篇旧文章，讨论了在 Snap 中将 SVG 加载到 div 中的问题。https://dev59.com/7HnZa4cB1Zd3GeqPpWKy - TimSPQR
2个回答
34

我在思考如何调整这个 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/

奇怪，但我收到了错误信息：属性preserveAspectRatio="xMaxYmax"的<svg>无效值。 - john k
1
我认为实际上是大小写问题，所以不知道浏览器使用大小写敏感性和如何处理它是否有一些细微的变化。https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio具有有效值。 - Ian
看起来不起作用？如果我改变div的宽度/高度，出现的图像大小不受影响。 - Andy Smith
这取决于你要改变什么，问题的标题有点模糊（因为问题指定了内部宽度/高度）。你是想让它响应式吗？如果是，请尝试将纸张的宽度/高度设置为100％，例如http://jsfiddle.net/9zRR8/543/。如果你指的是其他东西，那么发表一个新问题可能会更值得。 - Ian
@johnktejik 自你提问以来已经有一段时间了，但是既然没有人回答，那我来回答吧。值必须使用驼峰命名法，因此在 'Y' 后面的 'm' 必须大写，就像 'xMaxYMax' 一样。 - Justin
6
SVG不会自动缩放，因为它没有定义viewBox。viewBox告诉浏览器内容的尺寸是多少，没有它就无法确定应该如何缩放以适合页面。
这在svg-edit中有点失败。理想情况下，它应该添加一个viewBox。
您可以尝试将SVG加载到Inkscape或其他SVG编辑器中，这些软件应该会添加viewBox。或者，您也可以按照Ian的答案手动添加一个。
你能添加一些示例代码吗？我正在获取SVG元素，如何调整其大小是我面临的最大挑战。 - Vikash Pandey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接