将 SVG 转换为数据 URI 在 Firefox 中不起作用

Question

我有一个 SVG，我需要 'convert' 到 .png 图像，动态地通过 JavaScript。这样做的方法是将 SVG 绘制到虚拟 HTML5 canvas 元素中，然后通过 toDataURL 方法转换为数据 URI。代码如下：

HTML:

<div id="something" data-svg="<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'><path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/></svg>">

JS（使用 jQuery）：

$(function() {

  var svgData = $('#something').data('svg');
  var imageUrl = svgToImageURL(svgData);


  function svgToImageURL(svgString){
    var canvas = document.createElement("canvas");
    canvas.width = 260;
    canvas.height = 260;
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);

    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      var png = canvas.toDataURL("image/png");
      document.getElementById('something').innerHTML = '<img src="'+png+'"/>';
      DOMURL.revokeObjectURL(png);
    };

    img.src = url;
  }

这里可以看到一个fiddle来演示：https://jsfiddle.net/hejjgu7b/。它应该将 Adobe 徽标呈现为页面中的图像。

它在 Chrome 和 Edge 中工作正常，但在 Firefox 中图像总是空的。看起来数据 URI 在某种程度上是错误的，因为它比 Chrome/Edge.

中呈现的要短得多

我想知道是否有人能明白为什么会这样，以及如何让 Firefox 呈现正确的数据 URI？

非常感谢。

Answer 1

为什么这么复杂？您不需要在 canvas 中渲染 svg。您可以使用 btoa()

将其简单地编码为 base 64

btoa("<svg>...");

然后，您只需添加 data-url 前缀。

"data:image/svg+xml;base64," + btoa("<svg>...");

Answer 2

根据，似乎存在一个错误，即 Firefox 不会将 SVG 呈现为 canvas，除非 SVG 具有（非基于百分比的）宽度和高度属性。

这个项目的挑战之一是我们的 SVG 没有这样的属性，但我们可以克服它。根据更新后的 fiddle：https://jsfiddle.net/hejjgu7b/2/

，此问题本身现在已通过添加维度 (<svg width='105' height='93'...>) 得到解决

将 SVG 转换为数据 URI 在 Firefox 中不起作用

Converting SVG to data URI not working in Firefox

javascript

svg

data-uri

html5-canvas