0
У меня есть простой iframe без атрибута src, позволяющий использовать изолированную версию стиля из его содержащего документа. Атрибуты клипа на элементах svg, похоже, отлично работают в Chrome, но не работают корректно в Edge.Элементы svg в iframe, у которых есть атрибут клипа, не отображаются должным образом в 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 в страницу - отлично работает. Нижняя часть - это svg, встроенная в iframe на странице - не работает.
Примером скрипки, которая выставлена на выпуск, является here.
Я что-то упустил, чтобы заставить его работать правильно?