将 SVG 放大到不带面具/作物的容器

我已经尝试了 svg参数的许多变体，但是对于缩放这个特定的 SVG 没有任何乐趣。

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

我的目标是500x309px。

什么样的 width，height，viewBox和 preserveAspectRatio的组合可以帮助我在没有 SVG 屏蔽或裁剪的情况下实现这个目标？

88588 次浏览
小开

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

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

这种技术对 SVG 进行缩放以适应界限。

希望这个能帮上忙。

小开
最佳答案

  1. 您的 SVG 元素上必须有一个 viewBox属性，该属性描述希望始终可见的内容的边界框。(您链接到的文件没有; 您需要添加一个。)

  2. 要使 SVG 填充 HTML 元素，请在封装器上放置 CSS 属性 position:relative(如果合适的话，可以是 position:absolute或 position:fixed) ，然后

  3. 在 <svg>元素上设置 CSS 属性 position:absolute，使其位于内部并填充 div。(如有需要，亦可使用 left:0; top:0; width:100%; height:100%。)

一旦有了 viewBox并且 SVG 的大小正确，preserveAspectRatio属性的默认值就可以满足您的需要了。特别是，xMidYMid meet的默认值意味着:

  • 呈现时将保留 viewBox 描述的高宽比。
    相比之下，none值允许非均匀缩放。
  • 视图框总是 meet，或者顶部/底部或者左边/右边，“信箱”保持另一个维度在里面。
    相比之下，slice值确保 viewBox 完全填充呈现，顶部/底部或左部/右部落在 SVG 之外。
  • ViewBox 将在 SVG 视图中保持垂直和水平居中。
    相比之下，xMinYMax的值将保持在左下角，只在右边或顶部进行填充。

你可以在这里看到现场直播: http://jsfiddle.net/Jq3gy/2/

尝试在 <svg>元素上为 preserveAspectRatio指定显式值，然后按“更新”以查看它们如何影响呈现。

编辑 : 我已经创建了一个简化版本的 带有 viewBox 的美国地图(几乎是字节的一半) ，并在更新的演示中使用它来满足您的确切需要: < a href = “ http://jsfiddle.net/Jq3gy/5/”rel = “ norefrer”> http://jsfiddle.net/jq3gy/5/

小开

将 SVG 的 width 和 height 设置为其容器的大小，然后将 presveAspectratio = 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的尺寸。但是 viewBox 操作是一个独立的问题。


提交答案