web-dev-qa-db-fra.com

Comment définir la largeur et la hauteur svg en pourcentage?

Je crée une ligne avec svg.mais lorsque je redimensionne mon navigateur, la ligne créée avec svg n'est pas redimensionnée.

J'essaie de définir la largeur du svg en pourcentage, mais après cela, la ligne n'apparaît pas. Comment puis-je définir la largeur de svg en pourcentage ??

<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>
csssvg
21
adib16

J'ai résolu mon problème. Je change mon code en ceci et cela fonctionne:

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

forcer une mise à jour

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

Modifier la propriété CSS de largeur

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