1

我需要将我的 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 在不同的浏览器中以不同的方式呈现。铬合金： 在此处输入图像描述

火狐：

在此处输入图像描述

即 9：

在此处输入图像描述

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

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

4

1 回答 1

2

<img>您可以通过或将 SVG 保存在文件中并将其用作资源<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 时也是如此。我已经在运行 ICS 和 Jellybean 的 Transformer Prime 和 Nexus 7 上进行了测试，工作正常。

应该也可以与您的父 div 一起使用，因为它只是被视为普通的 img 或对象。

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

显示：表

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

这是一个 JSFiddle，显示它与 table-cell 一起使用

于 2012-09-29T04:28:02.150 回答