Как установить ширину svg и svg на процент?

Я создаю строку с svg.but, когда я изменяю размер моего браузера, строка, созданная с помощью 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>

ОТВЕТЫ

Ответ 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>

Ответ 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);
});

Ответ 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>