如何按百分比设置 svg 宽度和 svg 高度？答案

【问题标题】：How to set svg width and svg height by percent?如何按百分比设置 svg 宽度和 svg 高度？
【发布时间】：2014-02-17 13:21:39
【问题描述】：

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

【问题讨论】：

标签： css svg

【解决方案1】：

强制更新

<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);
});

【讨论】：

【解决方案2】：

更改宽度 css 属性

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

【讨论】：

【解决方案3】：

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

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

【讨论】：