使用 CSS 更改 SVG Viewbox 大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24463096/
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
Change SVG Viewbox size with CSS
提问by Geoffrey Burdett
The Question: Is there a way to change the size of the SVG viewbox with CSS, but preserve the aspect ratio? OR is there another way to preserve the aspect ratio of the SVG without a view box.
问题：有没有办法用 CSS 更改 SVG 视图框的大小，但保留纵横比？或者还有另一种方法可以在没有视图框的情况下保留 SVG 的纵横比。
The Problem: I want to responsively adjust the size of the SVG, but keep the aspect ratio. The width of the viewbox adjusts with the page, but the height doesn't adjust with the width. The problem with that is that the height of the container div is dependent on the height of the viewbox. So the container div may be really tall even if there's nothing showing in the bottom half of the viewbox.
问题：我想响应式地调整 SVG 的大小，但要保持纵横比。viewbox 的宽度随页面调整，但高度不随宽度调整。问题在于容器 div 的高度取决于视图框的高度。因此，即使视图框的下半部分没有显示任何内容，容器 div 也可能非常高。
Fiddle: http://jsfiddle.net/hT9Jb/1/
小提琴：http: //jsfiddle.net/hT9Jb/1/
<style>
div{
width: 100%;
height: 500px;
background-color: #00ffff;
}
svg{
width: 50%;
background-color: #ffff00;
}
</style>
<div>
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>
</div>
(Object SVGs and img SVGs wont work for my purposes. It has to be inline. The solution doesn't have to be CSS...javascript is definitely an acceptable solution.)
（对象 SVG 和 img SVG 不适用于我的目的。它必须是内联的。解决方案不必是 CSS...javascript 绝对是一个可以接受的解决方案。）
回答by sansSpoon
I haven't yet found a way to change the viewBox property with CSS. However this Javascript solution works well:
我还没有找到用 CSS 更改 viewBox 属性的方法。但是，此 Javascript 解决方案效果很好：
var mySVG = document.getElementById('svg');
mySVG.setAttribute("viewBox", "0 0 100 100");
Also remove any references to width and height from the SVG and set them in CSS. Even though your working with an SVG, it's inline so cascading rules apply.
还要从 SVG 中删除对宽度和高度的任何引用，并在 CSS 中设置它们。即使您使用 SVG，它也是内联的，因此级联规则适用。
回答by pruhter
You could use a transform:
您可以使用转换：
transform: scale(0.75); // 75% of original size
回答by Paul LeBeau
The width and height values specified in your SVG are the cause of your problem.
SVG 中指定的宽度和高度值是导致问题的原因。
The solution is to fix your SVG file. Change:
解决方案是修复您的 SVG 文件。改变：
width="250px" height="400px"
to
到
width="100%" height="100%"
Or with CSS:
或者使用 CSS：
width: 100%;
height: 100%;
回答by Danyu
Did you try:
你试过了吗：
preserveAspectRatio='xMinYMin'
Check this example http://jsfiddle.net/hT9Jb/3/
检查这个例子http://jsfiddle.net/hT9Jb/3/
For more details, see mozila documentation about svg
有关更多详细信息，请参阅有关 svg 的 mozila 文档
回答by Paulo Coghi - Reinstate Monica
In order to have a flexible SVG, that allows you to change its width and height, you need to remove completely the width and heightand work with viewboxinstead.
为了拥有一个灵活的 SVG，允许您更改其宽度和高度，您需要完全删除宽度和高度并使用它viewbox。
And, contrary to what sansSpoon said, you do not need javascript to do this.
而且，与 sansSpoon 所说的相反，您不需要 javascript 来执行此操作。
In your css, refer to your svg and define its max-widthand max-height, for example:
在你的 css 中，引用你的 svg 并定义它的max-widthand max-height，例如：
.my_svg_element {
max-width: 250px;
max-height: 400px;
}
After that, your SVG will be elastic and, at the same time, will respect the max width and height you have defined before.
之后，您的 SVG 将具有弹性，同时将尊重您之前定义的最大宽度和高度。
回答by Sasha Shpota
What helped me was setting heightand widthon an imgtag:
什么帮助我被设置height，并width在一个img标签：
<img src="./logo.svg" height="150px" width="150px"/>
回答by Debu Shinobi
svg{
width: 50%;
background-color: #000;
} <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin" preserveAspectRatio="none">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>Just use this and see if it works(worked for me).
只需使用它，看看它是否有效（对我有用）。
<svg .... .... ... preserveAspectRatio="none">
This should work.
这应该有效。
回答by Geoffrey Burdett
I found a simple javascript solution:
我找到了一个简单的javascript解决方案：
function setSvgSize(){
var width = document.getElementById('svg-container').offsetWidth;
var x = parseInt( $('#svg').attr('width') );
var y = parseInt( $('#svg').attr('height') );
var height = (width / x) * y;
$('#svg-container').css('height',height);
}
