Html 将 SVG 缩放到没有遮罩/裁剪的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9566792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scale SVG to container without mask/crop
提问by sgb
I have tried many variants of the svgparameters, but have had no joy in scaling this particular SVG.
我已经尝试了许多svg参数的变体，但是在缩放这个特定的 SVG 时并没有感到高兴。
I am trying to contain this SVGinto a container element that controls the size of the SVG.
我正在尝试将此 SVG包含到控制 SVG 大小的容器元素中。
I'm aiming for 500x309px.
我的目标是 500x309px。
What combination of width, height, viewBoxand preserveAspectRatiocan help me achieve this without having the SVG masked or cropped?
width, height,viewBox和 的什么组合preserveAspectRatio可以帮助我在不屏蔽或裁剪 SVG 的情况下实现这一目标？
回答by Phrogz
You absolutely must have a
viewBoxattribute 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.)To cause your SVG to fill an HTML element, put the CSS attribute
position:relative(orposition:absoluteorposition:fixedif appropriate) on your wrapper, and thenSet the CSS attribute
position:absoluteon your<svg>element to cause it to sit inside and fill your div. (If necessary, also applyleft:0; top:0; width:100%; height:100%.)
您绝对必须
viewBox在 SVG 元素上有一个属性来描述您希望始终可见的内容的边界框。（您链接到的文件没有；您需要添加一个。）为了让你的 SVG 填充一个 HTML 元素，把 CSS 属性
position:relative（position:absolute或者position:fixed如果合适的话）放在你的包装器上，然后position:absolute在您的<svg>元素上设置 CSS 属性，使其位于内部并填充您的 div。（如有必要，也适用left:0; top:0; width:100%; height:100%。）
Once you have a viewBoxand your SVG sized correctly the default value of the preserveAspectRatioattribute will do what you want. In particular, the default of xMidYMid meetmeans that:
一旦你有 aviewBox并且你的 SVG 大小正确，preserveAspectRatio属性的默认值就会做你想要的。特别是，默认值xMidYMid meet意味着：
- The aspect ratio described by your viewBox will be preserved when rendering.
By comparison, a value ofnonewould allow non-uniform scaling. - The viewBox will always
meeteither top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
By comparison, a value ofsliceensures 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 ofxMinYMaxwould keep it in the bottom-left corner, with padding only to the right or top.
- 渲染时将保留 viewBox 描述的纵横比。
相比之下， 的值none将允许非均匀缩放。 - viewBox 将始终
meet是顶部/底部或左侧/右侧，“信箱”将另一个维度保留在里面。
相比之下，值slice可确保您的 viewBox 完全填充渲染，顶部/底部或左侧/右侧落在 SVG 之外。 - viewBox 将在 SVG 视口内保持垂直和水平居中。
相比之下， 的值xMinYMax会将其保留在左下角，仅在右侧或顶部填充。
You can see this live here: http://jsfiddle.net/Jq3gy/2/
你可以在这里看到这个：http: //jsfiddle.net/Jq3gy/2/
Try specifying explicit values for preserveAspectRatioon the <svg>element and press "Update" to see how they affect the rendering.
尝试preserveAspectRatio在<svg>元素上指定显式值，然后按“更新”查看它们如何影响渲染。
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/
编辑：我创建了一个带有 viewBox（几乎一半字节）的美国地图的简化版本，并在更新的演示中使用它来满足您的确切需求：http: //jsfiddle.net/Jq3gy/5/
回答by john ktejik
Set the SVG width and height to be the size of its container, and set preserveAspectRatio = none.
将 SVG 的宽度和高度设置为其容器的大小，并设置 preserveAspectRatio = none。
<div height="50" width="100">
<svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>
and
和
$("svg").each(function(){
this.width = this.parentNode.width;
this.height = this.parentNode.height;
}
That's it. Setting CSS is not needed.
就是这样。不需要设置 CSS。
I personally set viewBox to be the size of the contentsof the SVG. So in my example, the original image I am loading into my SVG is 300x200. It will shrink to fit a 50x100 div. But viewBox manipulation is a separate issue.
我个人将 viewBox 设置为 SVG内容的大小。所以在我的例子中，我加载到我的 SVG 中的原始图像是 300x200。它将缩小以适应 50x100 div。但是 viewBox 操作是一个单独的问题。
回答by Valentin Vasilyev
Unfortunately, I don't know the answer that applies to raw SVG, but in Raphael.js, I did it like that:
不幸的是，我不知道适用于原始 SVG 的答案，但在 Raphael.js 中，我是这样做的：
var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);
This technique scaled my SVG to fit the bounds.
这种技术缩放了我的 SVG 以适应边界。
Hope this helps.
希望这可以帮助。
