how to resize the svg element using scale transform

Question

I have drawn the circle using svg. And binds the window resize event. The actual svg circle radius is 200, svg width and height value is 500. When resize the window it should be resize using scaling.while increase the window size and decrease the window size. how to acheive this?

<body onresize="myFunction()">
<svg id='circle' height="500" width="500">
  <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>

function myFunction(){
    var element = document.getElementById('circle');
    element.setAttribute('transform', 'scale(0.9)')   
}

Sample Link: https://jsfiddle.net/fNPvf/42891/

Check out this article Making svg responsive by Sara Soueidan — Bharathvaj Ganesan
@Pirs yes that's the bad idea i am already recalculated. but i need another one more option so that i am asking this — Akbar Basha

Paul LeBeau Paul LeBeau · Accepted Answer · 2017-07-11T17:01:20

If you want an SVG to scale, it needs to have a viewBox. Try:

viewBox="0 0 500 500"

function myFunction() {
    var element = document.getElementById('circle');
    element.setAttribute('transform', 'scale(0.9)')   
}

<body onresize="myFunction()">
  <svg id='circle' width="500px" viewBox="0 0 500 500">
    <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="red" />
  </svg>
</body>

Example JSFiddle

But why are you trying to resize the SVG on window resize yourself? Why not let the browser do it for you?

<svg id='circle' width="50%" viewBox="0 0 500 500">
  <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="red" />
</svg>

Example JSFiddle

how to resize the svg element using scale transform

1 Answers