将SVG缩放到没有蒙版/裁剪的容器 [英] Scale SVG to container without mask/crop

问题描述

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

我试图将这个SVG 放入一个控制尺寸的容器元素中

我的目标是500x309px。

width ， height ， viewBox 和 preserveAspectRatio 可以帮助我实现这个功能，而不会让SVG蒙版或裁剪？

解决方案

1. 您绝对必须拥有 viewBox 属性，它描述了你想要始终可见的内容的边界框。 （您链接到的文件不会;您需要添加一个。）




2. 要使SVG填充HTML元素，请将CSS属性 position：relative （或 position：absolute 或 position：fixed 设置CSS属性位置：绝对在您的包装上，然后

你的< svg> 元素使它坐在里面并填充你的div。 （如有必要，还可以应用 left：0; top：0; width：100％; height：100％。）

一旦你有一个 viewBox 并且你的SVG的大小正确， preserveAspectRatio 属性会做你想做的。特别是， xMidYMid的默认值满足意味着：

• 通过比较， none 的值将允许非均匀缩放。


• viewBox将始终满足顶部/底部或左侧/右侧，'letterboxing'保持其他维度。 >
  通过比较， slice 的值确保您的viewBox完全填充渲染，并且顶部/底部或左/右落在SVG。


• viewBox将在SVG视口中保持垂直和水平居中。
  
  通过比较， xMinYMax 会将它保留在左下角，只在右侧或顶部填充。

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

b
$ b

请在< svg> 元素上指定 preserveAspectRatio 的明确值，然后按更新以查看它们如何影响呈现。

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

I have tried many variants of the svg parameters, but have had no joy in scaling this particular SVG.

I am trying to contain this SVG into a container element that controls the size of the SVG.

I'm aiming for 500x309px.

What combination of width, height, viewBox and preserveAspectRatio can help me achieve this without having the SVG masked or cropped?

解决方案

1. You absolutely must have a viewBox attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)

2. To cause your SVG to fill an HTML element, put the CSS attribute position:relative (or position:absolute or position:fixed if appropriate) on your wrapper, and then

3. Set the CSS attribute position:absolute on your <svg> element to cause it to sit inside and fill your div. (If necessary, also apply left:0; top:0; width:100%; height:100%.)

Once you have a viewBox and your SVG sized correctly the default value of the preserveAspectRatio attribute will do what you want. In particular, the default of xMidYMid meet means that:

• The aspect ratio described by your viewBox will be preserved when rendering.
  By comparison, a value of none would allow non-uniform scaling.
• The viewBox will always meet either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
  By comparison, a value of slice ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG.
• The viewBox will be kept vertically and horizontally centered within the SVG viewport.
  By comparison, a value of xMinYMax would keep it in the bottom-left corner, with padding only to the right or top.

You can see this live here: http://jsfiddle.net/Jq3gy/2/

Try specifying explicit values for preserveAspectRatio on the <svg> element and press "Update" to see how they affect the rendering.

Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/

这篇关于将SVG缩放到没有蒙版/裁剪的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！