火狐SVG2Blob工作不正常(Firefox SVG2Blob not working as ex

我与我需要转换为普通HTML画布SVG文本路径工作。对于我SVG转换到一个blob文件和“下载”为图像。然而，它似乎，虽然SVG转换成团块Firefox的地方休息和文本路径的过程中完全丧失。

这里的问题的小提琴： 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 +，歌剧，Chrome，但不是Firefox浏览器。（当前稳定版本）看来，火狐完全忽略路径元素。

任何想法如何解决这个问题？我试图Canvg但它不支持文本路径和动力学似乎产生了在Firefox渲染的人工何况它缺少一些关键的SVG功能。

我知道这个工作的跨浏览器没有很好的解决方案。

然而，对于Firefox和WebKit浏览器，你可以尝试直接在URL编码数据传递到一个图片src。
（具有设置为标题data:image/svg+xml; charset=utf8 ,)
然后在画布绘制。

它应该保持的XLink引用，但IE会玷污画布，所以你将无法访问其数据。
但是，您可以让用户右键点击画布上， 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，也没有其他办法知道鉴于，已玷污了画布或不是一个尝试{}赶上（）。
因此， toDataURL()可真是消费，它可能是一个坏主意，做一个尝试捕捉，严重的垃圾收集浏览器。
所以，如果你有办法知道你之前使用IE浏览器，避免它，如果你一定要做到多时间在同一页上，所以只发生一次添加一个标志。