通過它的父div縮放svg

我在DIV內部有一個內聯svg。我如何根據其父部分的寬度來增加/縮小svg？通過它的父div縮放svg

它在IE中不起作用，但在鉻中工作。當我使用的開發工具中鉻，我注意到這一點：

enter image description here

我讀過，setAttribute（）方法可以用來調整SVG的視框？

我該如何解決這個問題在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>

來源

2015-04-29 Becky

https://css-tricks.com/scale-svg/ – CBroe

@CBroe：謝謝。我已經通過了。這裏的問題是縮放在IE中不起作用（在FF中工作）。 – Becky

[IE不支持此功能...]（http://caniuse.com/#feat=svg），但也許在此頁面上的解決方法將有所幫助。 – Xufox

有很多方法可以做到這一點：

首先，請訪問：http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

我知道它會幫助你很多！

preserveAspectRatio =「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>

希望它能幫助！

來源

2015-04-29 22:13:51

對於IE，您必須將寬度和高度明確設置爲100％。使用CSS設置它：

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

來源

2015-04-30 10:10:53

我剛剛想出了這件事。將一個onload事件添加到可縮放到父div大小的svg img元素。

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);

，並在onload看起來像......

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

來源

2017-06-30 21:21:33

通過它的父div縮放svg

回答

相關問題