如何将SVG宽度和SVG高度设置为百分比

Question

我使用svg.创建一条线，但是当我调整浏览器大小时，使用SVG创建的行不调整大小。

我尝试以百分比设置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>

Answer 1

我解决了我的问题。我将代码更改为此，这正在起作用：

<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>

Answer 2

强制更新

<svg id="mySVG" height="210" width="500">...</svg>

JS：

var mySVG = document.getElementById("mySVG");
mySVG.setAttribute("width",  window.innerWidth);
mySVG.setAttribute("height", window.innerHeight);

JS JQuery：

$(window).resize(function() {
    $("#mySVG").attr("width",  window.innerWidth);
    $("#mySVG").attr("height", window.innerHeight);
});

Answer 3

更改宽度CSS属性

<svg width="10%">
  <line x1="380" y1="20" x2="230" y2="200" style="stroke: rgb(234, 243, 234); stroke-width: 5"></line>
</svg>