CSS 如何按百分比设置 svg 宽度和 svg 高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21368410/
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
How to set svg width and svg height by percent?
提问by adib16
I create a line with svg.but when I resize my browser the line created with svg not resized.
我用 svg 创建了一行。但是当我调整浏览器的大小时，用 svg 创建的行没有调整大小。
I try to set width the svg in percent but after doing that the line not appear. How I can set width of svg by percent??
我尝试以百分比设置 svg 的宽度，但在此之后该行不会出现。如何按百分比设置 svg 的宽度？
<svg height="210" width="500">
<line x1="380" y1="20" x2="230" y2="200" style="stroke: rgb(234, 243, 234); stroke-width: 5"></line>
</svg>
回答by adib16
I solved my problem. I change my code to this and this is working:
我解决了我的问题。我将我的代码更改为此，这是有效的：
<svg style="width:100%;height:100%;">
<line x1="100%" y1="0%" x2="0%" y2="100%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line>
</svg>
回答by LarsEngeln
forcing an update
强制更新
<svg id="mySVG" height="210" width="500">...</svg>
js:
js：
var mySVG = document.getElementById("mySVG");
mySVG.setAttribute("width", window.innerWidth);
mySVG.setAttribute("height", window.innerHeight);
js + jQuery:
js + jQuery：
$(window).resize(function() {
$("#mySVG").attr("width", window.innerWidth);
$("#mySVG").attr("height", window.innerHeight);
});
回答by Asil ARSLAN
Change width css property
更改宽度 css 属性
<svg width="10%">
<line x1="380" y1="20" x2="230" y2="200" style="stroke: rgb(234, 243, 234); stroke-width: 5"></line>
</svg>
