JimF
JimF

Reputation: 333

Making SVG's inside a nested div responsive

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

Answers (0)

Related Questions