I have a resizable div. It has two inner divs. One of the inner divs has an svg element in it.
In the svg element I am adding and removing the content dynamically such that each time I add something in my svg. I increase its height by adding 20px to it and when I remove I subtract the height by 20px. When my svg height become greater than its parent div a scroll bar appears in the parent div. Similarly scroll bar is removed when svg height is less than parent div.
The problem starts when I do the resizing. I have added a viewbox option in my svg for resizing. But when I increase the size some of my svg elements are not visible. And when I decrease the size my svg get placed at a lower position leaving empty space.
Its all messed up in my mind that how to deal svg position/height with viewbox property.
I have tried to make a fiddle to simulate the behavior somehow. But here elements in svg are not adding dynamically and the svg height is constant.
Any help will be appreciated