Question

我需要将我的svg放在div中，如下所示：

<div style="height:100px; width: 300px; border:1px solid red;" >
    <div style="width: 100%; height: 100%; display: table;">
        <div style="display:table-row; height:100%">
            <div style="position: relative; vertical-align: middle; height:100%;">
                <div style="vertical-align: middle; position: relative; margin: 0px auto; height:100%;">
                    <svg viewBox="0 0 485 255" id="damageCanvas" style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" fill="rgba(124,240,10,0.5)" height="100%" width="100%">    
                            <g transform="translate(1,1)">
                                <rect stroke="black" stroke-width="1.5" width="99.5%" height="99.5%" fill-opacity="0" style="padding: 2px 2px 2px 2px"></rect>                    
                            </g>                        
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

问题是以下SVG以不同的方式在不同的浏览器中呈现。铬： enter image description here

Firefox：

enter image description here

IE 9：

enter image description here

我想要像Chrome版本一样缩放图像。我怎样才能做到这一点？

小提琴：http://jsfiddle.net/Sq5bL/5/

Answer 1

您可以将SVG保存在文件中，并通过<img>或<embed>将其用作资源。我已经使用了它们并且它可以很好地扩展。 <img>阻止您访问SVG，因此如果您需要访问SVG，我建议您使用<embed>。

在我的情况下，我做了：

<embed id="gaugeSpeed" class="gaugeImage" width="200" height="200" type="image/svg+xml" src="assets/gauges/speed.svg">

它很好地缩放了它。当我使用带有<img>标记的SVG时也是如此。我已经在Transformer Prime和运行ICS和Jellybean的Nexus 7上进行了测试，效果很好。

也应该与你的父div一起正常工作，因为它只是像普通的img或对象一样对待。

好吧，既然你想保留你的SVG ......你的问题是由

的使用引起的

显示：表格

在第二个div上。如果您将其更改为表格单元格或删除它，那么您的问题将得到解决。

This is a JSFiddle that shows it working with table-cell

SVG在不同浏览器上的缩放比例不同

1 个答案: