Question

我尝试了svg参数的许多变体，但是在扩展这个特定的SVG方面没有任何乐趣。

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

我的目标是500x309px。

width，height，viewBox和preserveAspectRatio的哪种组合可以帮助我在不屏蔽或裁剪SVG的情况下实现这一目标？

Answer 1

您的SVG元素必须具有viewBox属性，该属性描述了您希望始终可见的内容的边界框。（您链接到的文件没有;您需要添加一个。）
要使SVG填充HTML元素，请将CSS属性position:relative（或position:absolute或position:fixed，如果适用）放在包装器上，然后
在position:absolute元素上设置CSS属性<svg>，使其位于内部并填充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>指定显式值，然后按“更新”以查看它们对渲染的影响。

修改：我创建了US Map with a viewBox的简化版本（差不多一半的字节），并在更新的演示中使用它以满足您的确切需求：http://jsfiddle.net/Jq3gy/5/

Answer 2

将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中的原始图像是300x200。它将缩小以适应50x100 div。但是viewBox操作是一个单独的问题。

Answer 3

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

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

这项技术可以扩展我的SVG以适应界限。

希望这有帮助。