Reputation: 333
I have this demo:
#parent {
position: relative;
}
#child {
position: absolute;
width: 320px;
height: 130px;
}
<div id="parent">
<div id="child"
style="left: 0px; top: 0px; width: 320px; height: 130px;">
<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg" >
<rect width="320" height="130" x="0" y="0"
style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>
</div>
<svg width="900" height="900" xmlns="http://www.w3.org/2000/svg" >
<circle cx="350" cy="350" r="300" stroke="green"
stroke-width="4" fill="green"></circle>
</svg>
</div>
And what I am trying to do is when the browser window is scaled down the SVG images scale accordingly. And also I need the divs that wrap the SVG's. I need the divs because I prefer to use jQuery for dragging the rectangle and resizing the rectangle also. Think of the large circle as a floor map.
What is happening instead is, I get horizontal scroll bars for the web browser.
Does anyone have a solution to this? Thanks, Jim
Upvotes: 0
Views: 67