Question

我开发了一个Web应用程序，该应用程序将动态可视化创建为嵌入到HTML中的SVG。另外，我添加了一项功能，可以将可视化的快照导出为静态PNG。

通常，这可以正常工作，除非我使用的是Microsoft IE / Edge，并且我向元素添加了高斯模糊滤镜。在这种情况下，过滤后的元素将变得不可见，即不再显示在PNG中。

Chrome和Firefox的行为符合预期。

有人知道我在做什么错吗？还是这是IE / Edge的已知问题？

我创建了一个最小的代码示例来演示该问题：

HTML

<button onclick="javascript:savePng('export1');">Save PNG 1 (with filter, broken in IE)</button>
<button onclick="javascript:savePng('export2');">Save PNG 2 (without filter, working)</button>

<svg id="export1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <defs>
    <filter id="glow1">
      <feGaussianBlur result="coloredBlur" stdDeviation="2.5" />
      <feMerge>
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect id="test1" x="2" y="2" width="5" height="5" style="fill:red; filter:url('#glow1');" />
</svg>

<svg id="export2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <defs>
    <filter id="glow2">
      <feGaussianBlur result="coloredBlur" stdDeviation="2.5" />
      <feMerge>
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect id="test2" x="2" y="2" width="5" height="5" style="fill:red;" />
</svg>

JavaScript（使用jQuery获取SVG节点）

function savePng(svg) {
  var img = new Image();
  var serializer = new XMLSerializer();
  var svgStr = serializer.serializeToString($("#" + svg).get(0));
  var width = 800;
  var height = 600;

  var canvas = document.createElement("canvas");
  canvas.setAttribute("style", "display:none;");
  canvas.width = width;
  canvas.height = height;

  var ctx = canvas.getContext("2d");
  ctx.rect(0, 0, width, height);
  ctx.fillStyle = "white"; // : "rgb(43,43,43)";
  ctx.fill();

  var DOMURL = window.URL || window.webkitURL || window;
  var svgBlob = new Blob([svgStr], {
    type: 'image/svg+xml;charset=utf-8'
  });
  var url = DOMURL.createObjectURL(svgBlob);

  img.src = "data:image/svg+xml;charset=utf8," + svgStr;
  img.onload = function() {
    ctx.drawImage(img, 0, 0, width, height);
    if (canvas.msToBlob) {
      var blob = canvas.msToBlob();
      window.navigator.msSaveBlob(blob, 'test.png');
    } else {
      var link = document.createElement('a');
      link.setAttribute('download', 'test.png');
      link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
      link.click();
    }
  };

}

只需单击按钮并检查下载的图像。在Firefox和Chrome中，两个SVG（模糊的红色方块和“实心”红色方块）均按预期方式导出，在IE / Edge中，模糊的方块消失了。

IE / Edge不会将具有高斯模糊的SVG元素导出到PNG

0 个答案: