html - 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 在不同浏览器中以不同方式呈现。 Chrome :

火狐浏览器:

IE 9:

我希望图像像 Chrome 版本一样缩放。我怎样才能实现这个目标？

fiddle :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">

而且它的缩放效果很好。当我将 SVG 与 <img> 一起使用时也是如此标签。我已经在运行 ICS 和 Jellybean 的 Transformer Prime 和 Nexus 7 上进行了测试，工作正常。

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

---

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

display: table

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

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