CODEWITHSUNDEEP
csssvg
adib16
adib16

Reputation: 1707

How to set svg width and svg height by percent?

I create a line with svg.but when I resize my browser the line created with svg not resized.

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 height="210" width="500">
  <line x1="380" y1="20" x2="230" y2="200" style="stroke: rgb(234, 243, 234); stroke-width: 5"></line>
</svg>

Upvotes: 40

Views: 123150

Answers (3)

Asil ARSLAN
Asil ARSLAN

Reputation: 1146

Change width css property

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

Upvotes: 2

adib16
adib16

Reputation: 1707

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>

Upvotes: 55

LarsEngeln
LarsEngeln

Reputation: 288

forcing an update

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

Upvotes: 7

Related Questions