SVG在不同的浏览器上缩放不同 [英] SVG scaled differently on different browsers

问题描述

我需要我的svg在div中如下：

I need to have my svg within div's as follows:

<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：

The problem is that the following SVG is rendered in different browsers in different ways. Chrome:

Firefox：

IE 9：

我想要的图像是按照铬版本缩放。我如何实现这一点？

I want the image to be scaled as in chrome version. How can i achieve this?

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

推荐答案

您可以将SVG储存在档案中并使用作为资源，通过< img> 或< embed> 。我使用了两个，它缩放很好。 < img> 会阻止您访问SVG，因此，如果您需要访问SVG，那么我建议使用< embed> 。

You can save your SVG in a file and use it as a resource, via <img> or <embed>. I've used both and it scales nicely. <img> stops you from accessing the SVG, so if you need access to the SVG then I would recommend using <embed>.

在我的情况下，我做了：

In my case I did:

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

同样，当我使用SVG与< img> 标签。我已经测试了Transformer Prime和运行ICS和Jellybean的Nexus 7，工作正常。

and it scaled it nicely. Same for when I use SVG with the <img> tag. I've tested on Transformer Prime and Nexus 7 running both ICS and Jellybean, works fine.

应该与父div一样正常工作，因为它只是像一个正常的img或对象。

Should work fine with your parent div as well, as it's just treated like a normal img or object.

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

Well, since you would like to keep your SVG... your problem is caused by the use of the

display：表

display: table

在第二个div。如果你改变它到一个表单元格或删除它，然后你的问题被解决。

on the second div. If you change that to a table-cell or remove it then your problem is resolved.

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

这篇关于SVG在不同的浏览器上缩放不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！