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

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在不同的浏览器中以不同的方式呈现。 铬合金：

火狐：

IE 9：

我希望图像像 chrome 版本一样缩放。我怎样才能做到这一点？

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

Answer 1

您可以通过<img> 或<embed> 将您的SVG 保存在一个文件中并将其用作资源。我已经使用了这两种方法，并且可以很好地扩展。 <img> 阻止您访问 SVG，所以如果您需要访问 SVG，那么我建议您使用 <embed>。

就我而言，我做到了：

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

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

您的父 div 也应该可以正常工作，因为它只是被视为普通的 img 或对象。

---

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

显示：表格

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

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