将SVG缩放到不带面罩/作物的容器

Question 1

我尝试了许多svg参数变体，但对缩放此特定SVG并不满意。

我正在尝试将此SVG包含在控制SVG大小的容器元素中。

我的目标是500x309px。

什么组合width，height，viewBox和preserveAspectRatio能够帮助我实现这个不具有SVG掩盖或不全？

Question 2

您绝对必须viewBox在SVG元素上具有一个属性，该属性描述您希望始终可见的内容的边界框。（您链接到的文件没有；您将要添加一个。）
为了使您的SVG，以填补一个HTML元素，把CSS属性position:relative（或position:absolute或position:fixed如适用）在您的包装，然后
position:absolute在您的<svg>元素上设置CSS属性，以使其位于内部并填充div。（如有必要，请同时申请left:0; top:0; width:100%; height:100%。）

一旦你有一个viewBox和你的SVG尺寸正确的默认值preserveAspectRatio属性将做你想做的。特别地，默认的xMidYMid meet意思是：

渲染时将保留viewBox描述的宽高比。
相比之下，的值none将允许非均匀缩放。
viewBox将始终meet位于顶部/底部或左侧/右侧，并通过“ letterboxing”将另一个尺寸保持在内部。
相比之下，的值slice确保了您的viewBox完全填充了渲染，并且顶部/底部或左侧/右侧位于SVG之外。
viewBox将在SVG视口内垂直和水平居中。
相比之下，值xMinYMax会将其保留在左下角，仅在右边或顶部填充。

您可以在此处实时查看：http : //jsfiddle.net/Jq3gy/2/

尝试指定明确的值preserveAspectRatio的<svg>元素，然后按“更新”，看看它们是如何影响渲染。

编辑：我已经创建了一个带有viewBox（几乎一半字节）的简化版美国地图，并在更新的演示中使用了它以满足您的确切需求：http : //jsfiddle.net/Jq3gy/5/

Question 3

将SVG的宽度和高度设置为其容器的大小，并设置prepareAspectRatio = 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中的原始图像是300x200。它将缩小以适合50x100 div。但是viewBox操作是一个单独的问题。

Question 4

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

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

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

希望这可以帮助。