SVG图像不在IE9中裁剪 | SVG图像不在IE9中裁剪

本文介绍了SVG图像不在IE9中裁剪的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下代码：

 <！DOCTYPE html& 
< html> 
< head> 
< title>测试。< / title> 
< / head> 
< body> 
< div style =border：solid 1px black; height：100px; width：100px> 
< svg height =100width =100viewbox =00 0 100 100> 
< path id =map1d =M210 10 L90 10 L90 90fill =red/> 
 < / div> 
< / html>

JSFiddle：

在Chrome和FF4中显示带边框的div和SVG对象内部的图像部分。

IE9显示全部SVG图像。这是一个功能还是一个错误？

Raphael框架是否能正确处理这种情况？

解决方案

编辑：鉴于我的

所以，如果你想要IE9符合你可以使用：

  svg：not（：root）{overflow： }

如建议和，SVG像包含在使用CSS的文档中的任何其他元素一样处理 overflow 。项目内部的元素溢出除非 overflow：hidden 或 overflow：scroll 如果超过父级的大小。 / p>

在你的示例中，我看到 path 超过了 viewbox 在 svg 元素上定义。由于默认的 overflow 是 visible ，路径将渗出超出 svg 元素的边界。此外，它溢出 svg 元素的父边界等。

 
The following code:
<!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>
JSFiddle: http://jsfiddle.net/HRsvX/
In Chrome and FF4 displays div with border and part of image that is INSIDE of SVG-object. Everything outside of the svg is not drawn.
IE9 displays WHOLE SVG-image. Is it a feature or a bug? Is there any way to cut the 'outbounding' part of image?
Does Raphael framework handle such case correctly?
 解决方案 
Edit: In light of my new understanding of the spec, I must correct myself below.
The default style required by the spec for elements in the svg namespace is:
svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }
per http://www.w3.org/TR/SVG/styling.html#UAStyleSheet
So, if you want IE9 to conform you can use:
svg:not(:root) { overflow: hidden; }
As suggested here and here.
The following is true if the default overflow: hidden is overridden:
According to the SVG Spec, SVG handles overflow like any other element when contained within a document that is using CSS. Items inside of the element overflow unless overflow: hidden or overflow:scroll if they exceed the size of the parent.
In your example, I see it as the path exceeds the viewbox defined on the svg element. Since the default overflow is visible, the path will "bleed" beyond the svg element's boundries. Additionally, it bleeds beyond the svg element's parent boundries, etc.
                        这篇关于SVG图像不在IE9中裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！