将SVG缩放到没有蒙版/裁剪的容器

我已经尝试了许多svg参数的变体，但是在缩放这个特定的SVG方面并没有什么喜悦。

我试图将这个SVG包含到控制SVG大小的容器元素中。

我瞄准500x309px。

什么width ， height ， viewBox和preserveAspectRatio可以帮助我实现这一点，而没有SVG蒙版或裁剪？

您绝对必须在您的SVG元素上具有viewBox属性，以描述您始终可见的内容的边界框。（您链接的文件不会;您需要添加一个。）
要使SVG填充HTML元素，请在包装器上放置CSS属性position:relative （或position:absolute或position:fixed如果适用，则为position:fixed ），然后
在<svg>元素上设置CSS属性position:absolute ，使其位于内部并填充div。（如果有必要，也适用left:0; top:0; width:100%; height:100% 。）

一旦你有一个viewBox和你的SVG大小正确的preserveAspectRatio属性的默认值将做你想要的。特别是， xMidYMid meet的默认值xMidYMid meet意味着：

渲染时，viewBox描述的宽高比将被保留。
相比之下， none值会导致不一致的缩放。
视图框将始终meet顶部/底部或左/右，“letterboxing”保持其他维度内。
通过比较， slice的值确保您的viewBox完全填充渲染，无论是上/下或左/右落在SVG之外。
viewBox将在SVG视口中保持垂直和水平居中。
相比之下， xMinYMax的值将保留在左下angular，只有右侧或顶部填充。

你可以在这里看到这个： http : //jsfiddle.net/Jq3gy/2/

尝试在<svg>元素上指定preserveAspectRatio显式值，然后按“Update”来查看它们对渲染的影响。

编辑：我创build了美国地图与一个视图框（几乎一半的字节）的简化版本，并在更新的演示中使用，以满足您的确切需要： http : //jsfiddle.net/Jq3gy/5/

将SVG宽度和高度设置为其容器的大小，并设置preserveAspectRatio = none。

 <div height="50" width="100"> <svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg> </div>

和

 $("svg").each(function(){ this.width = this.parentNode.width; this.height = this.parentNode.height; }

而已。设置CSS是不需要的。

我个人将viewBox设置为SVG 内容的大小。所以在我的例子中，我加载到SVG中的原始图像是300×200。它将缩小到适合50×100格。但是viewBox的操作是一个单独的问题。

不幸的是，我不知道适用于原始SVG的答案，但在Raphael.js中，我是这样做的：

 var paper = Raphael('#container', your_container_width, your_container_height); paper.setViewBox(realSvgWidth, realSvgHeight, true);

这种技术缩放我的SVG以适应边界。

希望这可以帮助。