javascript - toSVG() 不尊重文本和下划线的来源

Question

我有一个问题。我使用以下代码将文本添加到 Canvas :

var txt = new fabric.Text("Texto de prueba", 
    {
        top:canvas.getHeight()/2,    
        left:canvas.getWidth()/2,
        fontWeight: 'bold' , 
        textDecoration: 'underline' ,  
        fontStyle: 'italic', 
        textColor: '#cccccc', 
        fontFamily: "'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
    });
    txt.setFill("#000000");
    canvas.add(txt); 

    canvas.renderAll() ;

Canvas 中的网络结果:

http://s2.subirimagenes.com/privadas/previo/thump_2114814textoweb.png

然后，我将SVG() Canvas 并返回如下代码:

<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="400" xml:space="preserve"><desc>Created with Fabric.js
1.2.9</desc><defs></defs><g transform="translate(400 200)"><text font-family="''Lucida Sans Unicode', 'Lucida Grande', sans-serif'" font-size="40" font-style="italic" font-weight="bold" text-decoration="underline" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #000000; opacity: 1;" transform="translate(-167.5 39)"><tspan x="0" y="-26" fill="#000000">Texto de prueba</tspan></text></g></svg>

我将该代码保存在一个 svg 文件中并用 firefox 打开，结果是:

http://s2.subirimagenes.com/privadas/previo/thump_2114816resultado.png

很明显，文字字体不一样，也没有出现下划线。

拜托，我需要帮助。应该工作？

谢谢。

Answer 1

它适用于 Chrome。文本装饰的问题是 bug in Firefox在 Firefox 26.0 中，文本装饰工作正常。

font-family 的问题是 fabric.js 中的错误 - 正如您所看到的，font-family(svg 输出)中有太多引号。可以吗file a bug on github?