CODEWITHSUNDEEP
htmlsvgcross-browser
janith
janith

Reputation: 1025

SVG scaled differently on different browsers

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>

The problem is that the following SVG is rendered in different browsers in different ways. Chrome: enter image description here

Firefox:

enter image description here

IE 9:

enter image description here

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

Fiddle: http://jsfiddle.net/Sq5bL/5/

Upvotes: 2

Views: 1993

Answers (1)

Metalskin
Metalskin

Reputation: 4268

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

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.

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

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

display: table

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

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

Upvotes: 2

Related Questions