Question

我正在尝试将带有掩码引用的SVG注入iframe。这是一个约束。我必须使用iframe并在其中注入SVG。

看起来掩码网址url(#mask1)无法在Firefox中解析，除非我使用链接到外部SVG的src属性，或根本不使用iframe（我无法做到）。

我正在寻找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呈现

chrome

Firefox渲染

firefox

Answer 1

我已经争吵了一段时间，突然意识到如果你在#version 120 attribute vec4 vPosition; attribute vec4 vColor; varying vec4 color; uniform mat4 ModelView; uniform mat4 projection; void main() { gl_Position = projection*ModelView*vPosition/vPosition.w; color = vec4( vColor); }之前添加本地URI（例如，about:blank），它就会有效。

我在这里报告了这个问题：https://bugzilla.mozilla.org/show_bug.cgi?id=1157953

在iFrame中注入掩码的SVG在Firefox中被破坏

1 个答案: