CODEWITHSUNDEEP
svgresizescale
Akbar Basha
Akbar Basha

Reputation: 1198

how to resize the svg element using scale transform

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/

Upvotes: 1

Views: 1475

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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

Upvotes: 3

Related Questions