0
src属性を持たない単純なiframeを使用して、それを含む文書からスタイルサンドボックスを作成できます。 svg要素のクリップパス属性はChromeではうまくいくようですが、Edgeでは正しく機能しません。clip-path属性を持つiframe内のsvg要素がMicrosoft 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です。
正しく動作するように不足していますか？