7

Got this strange problem where IE do not want to obey the viewbox size of an SVG in my HTML.

viewBox="0 0 1000 563"

It works in all other browsers I've tried, but fails on IE on Windows (I run Win 8.1 w/IE 11.0). It seems to work on IE/Edge on Win10 though, even in IE<11 compability mode).

I really don't understand how to fix this problem, but I've read that IE does have problems with viewbox and size. But I can't find a way to fix it.

If anyone have any ideas how I could go about fixing this, then please let me know.

Here are the code in question, and 2 print-screens showing correct (firefox) and incorrect rendering (IE).

Code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
    <image class="trinn2" width="100%" height="100%" xlink:href="http://dummy.url"></image>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M718,467 L714,414 L656,412 L658,468 Z" id="poly_7557"></path>
    </a>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M588,468 L656,465 L656,411 L585,410 Z" id="poly_7559"></path>
    </a>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M484,410 L484,472 L586,468 L586,410 Z" id="poly_7560"></path></a><path class=" solgt poly  " d="" id="poly_7561"></path>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M846,369 L849,417 L789,416 L769,414 L767,361 Z" id="poly_7562"></path>
    </a>

    ... and so on ...

Screen from Firefox on top, and IE on bottom: (see the smaller SVG on IE. Defaults to 150px height.) enter image description here

EDIT: PHP code

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
        <image class="trinn2" width="100%" height="100%" xlink:href="<?php echo $left_image_markup; ?>"></image>
        <?php echo $left_facing;?>
         </svg>
Stian Berg Larsen
  • 543
  • 2
  • 10
  • 29

3 Answers3

3

I used javascript to detect the parent element's width/height and then set the SVG w/h to the same. I added the code to the $(window).resize event so that it dynamically adjusted the SVG when the browser window is resized.

function updateSVG() {
    var svg = $('#mySVG').first();
    if (svg != undefined && svg.length > 0) {
        var vb = svg.attr('viewBox');
        if (typeof (vb) == "string") {
            var c = vb.split(' ');
            if (c.length >= 4) {
                requestAnimationFrame(function () {
                    var w = c[2];
                    var h = c[3];
                    var pw = svg.parent().width();
                    svg.width(pw);
                    svg.height(pw*w/h);
                });
            }
        }
    }
}
$(window).resize(function() {
    updateSVG();
});
karel
  • 5,489
  • 46
  • 45
  • 50
Ben Hoffmann
  • 309
  • 2
  • 5
0

I've tried to solve this using all the tips from the articles posted and others I founc while searching for a solution. Nothing seemed to work for me.

I solved it (probably not the best way) by doing the following:

The parent div was given a padding-bottom with percentage to keep aspect ration, and the svg itself had to be positioned absolutely.

Stian Berg Larsen
  • 543
  • 2
  • 10
  • 29
0

Try including your svg as an object and giving it a width of 100% using CSS.

<object  style="width: 100%" type="image/svg+xml" class="full-width"  data="yoursvg.svg">Your browser does not support SVGs</object>   
jojojohn
  • 725
  • 2
  • 10
  • 19