Cross-browser way to force SVG fit inside div

Question

I'm trying to fit my SVG image inside a parent container. However, I probably misunderstood something because nothing works for me.

I tried use vievBox and preserveAspectRatio but it's not effect anything. JS FIDDLE

Then I tried to write a script to transform SVG but still it's not matching viewbox perfectly JS FIDDLE 2

Somehow both examples working in Internet Explorer 11 but not in Firefox and Chrome.

HTML

<div class="svg_box">
   <svg id="svg_map" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet">
     <g id="viewport">
       <g id="County_fills">
         <g id="wicklow">
            <path  d="m 660.19812,671.17693 c 4.3002,-24.4434 25.98479,-42.3466 13.668,-66.4151 3.521,-20.6076 -8.00616,-48.1039 -28.42028,-38.027 -11.84916,-7.4307 -15.52234,9.0615 -25.5361,-10.1857 -13.21206,-5.8314 -15.00724,18.141 -19.90659,23.682 -3.4252,15.0746 -22.32726,16.7667 -25.17803,34.5218 -0.30454,15.0967 8.81716,24.9106 24.882,22.849 7.57843,8.1943 17.12841,-1.2087 9.03025,18.9026 -10.09526,5.7923 -29.7139,-17.2323 -30.74574,1.6656 7.44289,0.675 23.28352,39.2398 37.71449,22.0728 5.70401,-21.6558 29.89655,-24.6066 41.068,-9.182 -0.82169,2.7052 6.39378,3.4876 3.424,0.116 z" id="path3626" />
         </g>
         <!-- ... other counties ... --->
       </g>
    </g>
 </svg>

JS

    $('#viewport').each(function () {
        var objThs = $(this);

        scaleH = $('#svg_map').innerHeight() / objThs[0].getBoundingClientRect().height;
        scaleW = $('#svg_map').innerWidth() / objThs[0].getBoundingClientRect().width;

        if (scaleH < scaleW) {
            scale = scaleH;
        }
        else {
            scale = scaleW;
        }
    centerX = parseInt($('#svg_map').innerWidth() - objThs[0].getBoundingClientRect().width * scale) / 2;
    centerY = parseInt($('#svg_map').innerHeight() - objThs[0].getBoundingClientRect().height * scale) / 2;
        objThs.attr('transform', "matrix(" + scale + ",0,0," + scale + "," + centerX + ","+centerY+")");
    });

I will be realy happy if it's possible to do that without JS but JS is better than nothing ;-)

Any help will be appreciated.

Have you checked whether innerWidth() and innerHeight() work for SVG elements on all browsers. I suspect it doesn't. You shouldn't need to use JS if you set the viewBox correctly. How did you choose your viewBox values? — Paul LeBeau, Nov 21 '14 at 12:37
I'm not using innerWidth and innerHeight to get svg dimensions but the parent div size, to get svg size I'm using .getBoundingClientRect(). I sure that I set vieBox wrong but I don't understand how to set it properly Here you can see what i tried: http://jsfiddle.net/2xw7vu0c/2/ — LJ Wadowski, Nov 21 '14 at 12:42
It looks to me like you are calling innerWidth on #svg_map, which is the svg, not the div. — Paul LeBeau, Nov 21 '14 at 22:17
`display: block`might be your answer, see https://stackoverflow.com/questions/39716346/why-is-the-containing-div-for-svg-taking-more-space — masterxilo, Dec 03 '19 at 09:59

score 3 · Accepted Answer · answered Nov 21 '14 at 22:23

The viewBox attribute describes the bounding box of the content of the SVG. It is used by the browser to calculate how much to scale the SVG content so it fills the SVG width and height without overflowing (depending on your preserveAspectRatio setting of course).

In your case "0 0 800 400" is wrong. It only covers a portion of the island. A more accurate value is "74 58 617 902". I got that by calling getBBox() on the "viewport" element.

See http://jsfiddle.net/2xw7vu0c/6/

Cross-browser way to force SVG fit inside div

1 Answers1