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

Question

我已经尝试了很多svg参数的变体,但在扩展这个特定的SVG时没有任何乐趣.

我试图将此SVG包含在一个控制SVG大小的容器元素中.

我的目标是500x309px.

什么样的组合的width,height,viewBox并且preserveAspectRatio可以帮助不具有SVG屏蔽或剪裁我做到这一点？

Answer 1

您必须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/

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 操作是一个单独的问题。