iframe 中具有 clip-path 属性的 svg 元素在 Microsoft Edge 中无法正确呈现答案

【问题标题】：svg elements within an iframe that have a clip-path attribute do not render properly in Microsoft Edgeiframe 中具有 clip-path 属性的 svg 元素在 Microsoft Edge 中无法正确呈现
【发布时间】：2017-04-12 17:47:00
【问题描述】：

我有一个没有 src 属性的简单 iframe，以允许从其包含的文档中进行样式沙盒。 svg 元素上的 clip-path 属性在 Chrome 中似乎很好用，但在 Edge 中不能正常工作。

代码

<html>
  <body>
    <div>
      <div id="expected"></div>
      <hr>
      <iframe id="myiframe" style="border: 0px;"></iframe>
    </div>
    <script>
      var iframeDoc = document.getElementById("myiframe").contentWindow.document;
      var svgStr = '<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="myClip"><circle cx="30" cy="30" r="20"/><circle cx="70" cy="70" r="20"/></clipPath></defs><rect x="10" y="10" width="100" height="100" clip-path="url(#myClip)"/></svg>';

      document.getElementById("expected").innerHTML = svgStr;
      iframeDoc.body.innerHTML = svgStr;
    </script>
  </body>
</html>

输出的顶部是直接嵌入页面的 svg——效果很好。底部是嵌入到页面 iframe 中的 svg - 不起作用。

显示该问题的小提琴示例是here。

我是否遗漏了一些东西以使其正常工作？

【问题讨论】：

标签： html iframe svg microsoft-edge clip

【解决方案1】：

mask="url(#mask)" 也会出现同样的问题。发生这种情况是因为 Edge 尝试解析父框架中的 #mask 或 #myClip 引用。为了强制它在 iframe 内解析它，请将 iframe 的位置添加到哈希前面：

var rect = '<rect ... clip-path="url(' + document.location + '#mask)" />';

【讨论】：