javascript - Internet Explorer 上的 SVG viewBox 和变换矩阵

标签 javascript internet-explorer svg

我需要一个 SVG 图像来填充 div 包装并产生缩放效果,因此 SVG 图像比 div 包装更大,但 div 包装之外的图像部分被裁剪。

我有代码:

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

它在 Firefox 和 Google Chrome 上完美运行,但在 Internet Explorer 上失败。 div 包装器外部的部分仍然可见。

这是 Google Chrome 屏幕截图: enter image description here

这是一个 Internet Explorer 屏幕截图: enter image description here

您可以注意到图像漂浮在 div 包装器之外。

如何在 div 包装器内渲染 SVG 图像?

最佳答案

将overflow="hidden"添加到 元素。 IE的默认值与其他UA不同。

关于javascript - Internet Explorer 上的 SVG viewBox 和变换矩阵,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32587254/

相关文章:

html - IE 11 无法正确显示 CSS 填充

html - <object> 中 SVG 的链接 "out"

javascript - 加载 svg-pan-zoom.js 后居中 <g> 元素

javascript - 对 Dojo newb 的 Dojo 模块有疑问吗?

javascript - 使用 javascript 进行多重下载

css - Internet Explorer 负边距未按预期工作

javascript - jQuery - IE fadeIn(), then immediately fadeOut() 问题

angularjs - 带有图像或 svg 的 Angular Material md-select

php - CodeIgniter 相对路径或基本 URL 函数?

javascript - 使用 jquery 将 tr 元素添加到另一个表中