Scale svg by its parent div

Question

I've got a inline svg inside a DIV. How do I make the svg grow/shrink according to the width of its parent div?

It doesn't work in IE but works in chrome. When I used developer tools in chrome I noticed this:

I've read that setAttribute() method can be used to adjust svg's viewBox?

How can I fix this to work in IE?

<div class="mainGA mainG">
   <div class ="drgAM">
       <svg viewBox="0 0 210 500"><polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:cyan;stroke:yellow;stroke-width:5;fill-rule:nonzero;" /></svg>
   </div>
</div>

Answer 1

for IE you have to set the width and height to 100% explicitly. set it using CSS:

div.drgAM, div.drgAM svg {
    height: 100%;
    width: 100%;
}

Answer 2

There are many ways to do that:

First, visit: http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

i know it will help you a lot!

preserveAspectRatio="xMinYMin meet" might help you with inline SVG. Or in this context you could use svg as an embed image.

if you want to create an elastic inline SVG you can do this:

CSS

.my-div{
    width:100px;
    height:75px;
}
.elastic{
    width:100%;
    height:100%;
}

HTML

<div class="my-div">
    <svg class="elastic"  viewbox="0 0 210 500" preserveAspectRatio="none" >
    </svg>
</div>

hope it helps!

Answer 3

Something I just came up with this. Add an onload event to the svg img element that scales to the size of the parent div.

var 
    div = document.createElement('div'),
    img = document.createElement('img');

div.style['width'] = '256px';
div.style['height'] = '128px';
img.onload = fitSVGToDiv;
img.style['visibility'] = 'hidden';
img['src'] = svgData;
div.appendChild(img);
document.body.appendChild(div);

and the onload looks something like...

// ADJUST A <DIV><IMG SRC='...SVG'></DIV> ELEMENT SO SVG FILLS
// DIMENSIONS OF DIV THIS IS AN ONLOAD EVENT FOR SVG IMAGES 
// INSIDE A DIV 
function fitSVGToDiv(e) {
    var 
        p = this.parentNode;

    this.style['transform-origin'] = 'top left';
    this.style['transform'] = 'scale(' 
        + (parseInt(p.style['width']) / this.getBoundingClientRect().width) 
        + ',' 
        + (parseInt(p.style['height']) / this.getBoundingClientRect().height) + ')';
    this.style['visibility'] = 'visible';
}