[英]Scale svg by its parent div
I've got a inline svg inside a DIV. 我在DIV里面有一个内联svg。 How do I make the svg grow/shrink according to the width of its parent div? 如何根据父div的宽度使svg增大/缩小?
It doesn't work in IE but works in chrome. 它在IE中不起作用,但在chrome中有效。 When I used developer tools in chrome I noticed this: 当我在chrome中使用开发人员工具时,我注意到了:
I've read that setAttribute() method can be used to adjust svg's viewBox? 我已经读过setAttribute()方法可以用来调整svg的viewBox吗?
How can I fix this to work in IE? 如何解决这个问题在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>
for IE you have to set the width and height to 100% explicitly. 对于IE,您必须明确地将宽度和高度设置为100%。 set it using CSS: 使用CSS设置它:
div.drgAM, div.drgAM svg {
height: 100%;
width: 100%;
}
There are many ways to do that: 有很多方法可以做到这一点:
First, visit: http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php 首先,访问: 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. preserveAspectRatio =“xMinYMin meet”可能会帮助您使用内联SVG。 Or in this context you could use svg as an embed image. 或者在此上下文中,您可以使用svg作为嵌入图像。
if you want to create an elastic inline SVG you can do this: 如果要创建弹性内联SVG,可以执行以下操作:
CSS CSS
.my-div{
width:100px;
height:75px;
}
.elastic{
width:100%;
height:100%;
}
HTML HTML
<div class="my-div">
<svg class="elastic" viewbox="0 0 210 500" preserveAspectRatio="none" >
</svg>
</div>
hope it helps! 希望能帮助到你!
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. 将onload事件添加到svg img元素,该元素可以扩展到父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... 并且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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.