[QUESTION] How to maintain SVG responsiveness?

[aesyondu]

I have the same issue as this one https://github.com/anvaka/panzoom/issues/87.

I created a jsbin for reference: https://jsbin.com/peyucig/1/edit?html,output

Is there a way to maintain SVG's responsiveness while using panzoom?

[aesyondu]

My workaround is to save the original width/height, then reapply it after loading panzoom:

const svg = this.$refs.mySvg
const { width, height } = svg.getBoundingClientRect()

const scene = this.$refs.scene
const instance = this.$panZoom(scene)

svg.setAttribute('width', width)
svg.setAttribute('height', height)

[hqzh]

same problem

[schube]

Hi!

I am not sure, if it is the same problem and/or if it solves the problem for you, but I added

style="height:100%; width:100%"

to my svg element, and then some scaling/positioning problems were gone.

In your jsbin that would be <svg viewBox="0 0 100 100" style="height:100%; width:100%">

Greetings