1

我有个问题。我使用以下代码将文本添加到画布：

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() ;

画布中的网络结果：

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

然后，我 toSVG() 画布并返回如下代码：

<?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

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

拜托，我需要帮助。应该管用？

谢谢。

4

2 回答 2

2

它适用于 Chrome。text-decoration 的问题是 Firefox 中的一个bug 在 Firefox 26.0 中 text-decoration 正在工作。

font-family 的问题是fabric.js 中的一个错误——你可以看到font-family 中的引号太多（svg 输出）。你能在github上提交一个错误吗？

于 2013-08-29T09:30:48.297 回答
1

Firefox 25 将是第一个支持 SVG 文本下划线的版本。

于 2013-08-29T09:19:12.743 回答