javascript - Firefox SVG2Blob 未按预期工作

Question

我正在使用 SVG 文本路径，需要将其转换为常规 HTML Canvas 。为此，我将 SVG 转换为 blob 文件并将其“下载”为图像。然而，似乎在将 SVG 转换为 blob 时，firefox 会在某个地方中断，并且在此过程中文本路径完全丢失。

这是问题的一个 fiddle :http://jsfiddle.net/ne5s2r1d/

var image = new Image();
var serializer = new XMLSerializer();
var data = serializer.serializeToString(document.getElementById("w3SVG"));

var blob = new Blob([data], {
    type: 'image/svg+xml'
});

var DOMURL = window.URL || window.webkitURL || window;
var url = DOMURL.createObjectURL(blob);

image.onload = function () {

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    canvas.width = canvas.height = 256;
    document.body.appendChild(canvas);

    ctx.drawImage(image, 20, 20);

    DOMURL.revokeObjectURL(url);
}

image.src = url;

var canvas2 = document.createElement("canvas");
var ctx2 = canvas2.getContext("2d");
document.body.appendChild(canvas2);

它适用于 IE10+、Opera、Chrome，但不适用于 Firefox。 (当前稳定版本)看来firefox完全忽略了path元素。

关于如何解决这个问题有什么想法吗？我尝试了 Canvg，但它不支持文本路径，而 Kinetic 似乎会在 Firefox 中创建渲染工件，更不用说它缺少一些关键的 SVG 功能。

Answer 1

我不知道有什么好的解决方案可以跨浏览器工作。

但是对于 Firefox 和 webkit 浏览器，您可以尝试将 url 编码数据直接传递到图像 src。
( header 设置为 data:image/svg+xml; charset=utf8 ,)
然后将其绘制在 Canvas 上。

它应该保留 xlink 引用，但 IE 会污染 Canvas ，因此您将无法访问其数据。
但是，您可以让用户右键单击 Canvas 并 save picture as… 。

这是一个处理完整过程的小脚本:

function svgToPngDataURL(svg){
    var svgDocType = document.implementation.createDocumentType('svg',  "-//W3C//DTD SVG 1.1//EN", "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd");
    var svgDoc = document.implementation.createDocument ('http://www.w3.org/2000/svg', 'svg', svgDocType);
    svgDoc.replaceChild(svg.cloneNode(true), svgDoc.documentElement);
    var svgData = (new XMLSerializer()).serializeToString(svgDoc);
    var header = 'data:image/svg+xml; charset=utf8 ,';

    var img = new Image();
    img.onload = function(){
        var canvas = document.createElement('canvas');
        canvas.width = this.width;
        canvas.height = this.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(this, 0,0);
        try{
            var data = canvas.toDataURL();
            }
        catch(ie){
            document.body.appendChild(canvas);
            displayIEerror();
            return;
            }
        doWhateverWith(data);
        }
    img.src = header+encodeURIComponent(svgData);
    }

这样做的主要问题是，如果您必须支持 IE，则没有其他方法可以知道它是否污染了 Canvas ，即 try{}catch()。
因此，toDataURL()可能非常消耗资源，并且在 try catch 中执行此操作可能不是一个好主意，浏览器会严重收集垃圾。
因此，如果您有办法知道您以前使用过 IE，请避免使用它，如果您必须在同一页面上多次执行此操作，请添加一个标志，以便它只出现一次。