I need a SVG image to fill a div wrapper and make a zoom effect, so the SVG image is bigger than the div wrapper but the image part that is outside the div wrapper is cropped.
I have the code:
<div style="width: 1903px; height: 728.382px;" class="svg-wrapper">
<svg height="100%" width="100%" id="svg" x="0px" y="0px" viewBox="0 0 1587.99609375 607.8125">
<g transform="matrix(1.5625,0,0,1.5625,-796.62390136719,-270.947265625)" id="draw">
<!-- svg contents -->
It works perfectly on Firefox and Google Chrome but it fails on Internet Explorer. The part that is outside the div wrapper is still visible.
This is a Google Chrome screenshot:
And this is an Internet Explorer screenshot:
You can notice that the image is floating outside the div wrapper.
How can I render the SVG image inside the div wrapper?
Add overflow="hidden" to the <svg> element. IE's default value is different to other UAs.