在iFrame中注入掩码的SVG在Firefox中被破坏。
提问于 2015-02-24 17:21:56
我正在尝试将带有掩码引用的SVG注入到iframe中。这是一种约束。我必须使用iframe并在其中注入SVG。
Chrome中的行为就是我正在寻找的(见附件截图)。
如何在该上下文中引用掩码才能使其在Firefox中工作？
请参阅下面的Plunker以方便测试：
http://plnkr.co/edit/CR82bQhifvSg4QhnS7fg
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>svg in iframe populated with JS (mask url broken in FF)</h1>
<iframe class="container"></iframe>
<h1>svg in iframe populated with src</h1>
<iframe class="container" src="svg.html"></iframe>
<h1>svg in div populated with JS</h1>
<div id="raw-svg" class="container"></div>
<script src="script.js"></script>
</body>
</html>JAVASCRIPT
var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">' +
// Blue square
'<rect style="stroke: none;fill: #0000ff; mask: url(#mask1)" width="100" height="100"></rect>' +
// Mask (upper half of the blue square)
'<defs><mask id="mask1" width="100" height="100">' +
'<rect x="0" y="0" width="100" height="50" style="stroke:none;fill: #ffffff"></rect>' +
'</mask></defs>' +
'</svg>';
var iframe = document.getElementsByTagName('iframe')[0];
iframe.contentWindow.document.body.innerHTML = svg;
document.getElementById('raw-svg').innerHTML = svg;Chrome渲染
Firefox渲染
回答 1
Stack Overflow用户
发布于 2015-04-23 23:02:45
我已经和这个问题斗争了一段时间，突然意识到如果你在本地URI前面加上about:blank (例如，url(about:blank#mask1))，它就会起作用。
我在这里报告了这个：https://bugzilla.mozilla.org/show_bug.cgi?id=1157953
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28702218
复制相关文章
![[SpingBoot guides系列翻译]文件上传](https://ask.qcloudimg.com/http-save/yehe-1160516/4t6iu5tpi3.png)
点击加载更多
腾讯云开发者
