当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - SVG viewBox and transform matrix on Internet Explorer

问题描述:

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

</g>

</svg>

</div>

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: