IE Bug:SVG标记在视口外可见

时间:2016-09-12 12:02:51

标签: html css internet-explorer svg

我遇到了Internet Explorer 11中的一个错误,即使外部元素有溢出:隐藏属性,标记路径仍然可见。

这是example of the described problem(需要在IE11中查看)

以下是代码示例:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div style="width: 440px; height: 495px; overflow:hidden; border: 1px solid red">
    <svg>
      <g transform="translate(413.209 51.1721) scale(0.514057)">
        <defs><marker id="end" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" fill-opacity="1" fill="#888" orient="auto" class="arrowhead"><path d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs>        
        <path marker-end="url(#end)" style="fill:transparent; opacity: 1; stroke: #000; stroke-opacity: 1;" d="M323.921875,-19.2421875H-465.20818355008544V961.2877197265625H-465.20818355008544V981.2877197265625"></path>
      </g>
    </svg>
    </div>
  </body>
</html>

问题图片:

the red border is the outer div which has overflow:hidden

我期望标记也被隐藏。以前有没有人经历过同样的事情?

只有在使用大于或小于100%的缩放时才会出现这种情况。

1 个答案:

答案 0 :(得分:0)

我遇到了以下关于css3转换和溢出的类似问题的文章:hidden:

https://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

有建议使用:

generateLabels

这解决了这个问题。

其原因可能与z-index的工作方式有关。 关于该主题的好读物可以在这里找到: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/