Javascript 按其父div缩放svg

我在一个DIV中有一个内联svg。如何使svg根据其父DIV的宽度增长/收缩

它在IE中不起作用，但在chrome中起作用。当我在chrome中使用开发者工具时，我注意到：

我读过setAttribute（）方法可以用来调整svg的viewBox

我怎样才能在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>

---

有很多方法可以做到这一点：

首先，访问：

我知道这对你会有很大帮助

preserveSpectratio=“xMinYMin meet”可能会帮助您使用内嵌SVG。或者在此上下文中，您可以使用svg作为嵌入图像

如果要创建弹性内联SVG，可以执行以下操作：

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>

---

希望有帮助

对于IE，您必须明确地将宽度和高度设置为100%。使用CSS进行设置：

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

---

这是我刚想到的。向svg img元素添加一个onload事件，该事件可扩展到父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);

而加载看起来像

// 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';
}

//调整元素，使SVG填充
//DIV的维度这是SVG图像的ONLOAD事件
//舱内
函数fitSVGToDiv（e）{
变量
p=此.parentNode；
这个.style['transform-origin']='top-left'；
此.style['transform']='scale（'
+（parseInt（p.style['width']）/this.getBoundingClientRect（）.width）
+ ',' 
+（parseInt（p.style['height']）/this.getBoundingClientRect（）.height）+'）；
this.style['visibility']='visible'；
}

@CBroe:谢谢。我已经经历过了。这里的问题是缩放在IE中不起作用（在chrome FF中起作用）。但也许本页上的变通方法会有所帮助。