HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5 – 在IE9中没有裁剪SVG图像大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
以下代码
<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test.</title> 
    </head> 
    <body> 
        <div style="border: solid 1px black; height:100px; width:100px">
            <svg height="100" width="100" viewBox="00 0 100 100">
                <path id="map1" d="M210 10 L90 10 L90 90 " fill="red"/>
            </svg>
        </div>
</html>

JSfiddlehttp://jsfiddle.net/HRsvX/

在Chrome和FF4显示div与边框和图像的一部分是SVG对象的INSIDE. svg之外的所有内容都没有绘制.

IE9显示全部SVG图像.是功能还是错误?有没有办法削减“出站”的图像部分?

拉斐尔框架是否正确处理这种情况?

解决方法

编辑:鉴于我的 new understanding of the spec,我必须在下面纠正自己.

svg命名空间中的元素规范所需的认样式是:

svg,symbol,image,marker,pattern,foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }

http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

所以,如果你想要IE9符合你可以使用:

svg:not(:root) { overflow: hidden; }

如建议herehere.

如果认overflow:hidden被覆盖,则为true:

根据SVG Spec,当包含在使用CSS的文档中时,SVG会像任何其他元素一样处理溢出.元素内部的项目溢出,除非overflow:hidden或overflow:如果它们超出父级的大小,则滚动.

你的例子中,我看到它的路径超过svg元素定义的viewBox.由于认溢出是可见的,所以路径将会超出svg元素的边界.另外,它超出了svg元素的父边界等.

大佬总结

以上是大佬教程为你收集整理的html5 – 在IE9中没有裁剪SVG图像全部内容,希望文章能够帮你解决html5 – 在IE9中没有裁剪SVG图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。