Question

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

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

显然，文本字体不一样，并且不显示下划线。

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

感谢。

Answer 1

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

font-family的问题是fabric.js中的一个错误 - 你可以看到font-family（svg输出）中的引号太多了。你可以请file a bug on github?

Answer 2

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

toSVG（）不尊重文本来源和下划线

2 个答案: