Question

我遇到了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>

问题图片：

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

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

Answer 1

我遇到了以下关于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/

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

1 个答案: