用IText制作toSVG缺失笔画

Question

当使用toSVG和IText一起使用时，编译to中似乎有一个缺陷。当更改有笔画的IText时，fabricjs就会将所有字符拆分为单独的tspans，笔画宽度= 0。

如本例所示(尝试通过添加新字母编辑文本两次)：

https://jsfiddle.net/xx37jpms/

var canvas = new fabric.Canvas('c');
var text_input = new fabric.IText("Edit this and save", {           
    fontSize: 100,
    stroke: '#dd5f60',
    strokeWidth: 2,
    fill: '#00ff00',
});

canvas.add(text_input);
canvas.renderAll();
document.getElementById('svg').innerHTML = canvas.toSVG();

document.getElementById('btn').onclick = function () {
    document.getElementById('svg').innerHTML = canvas.toSVG();
}

可以看到，编辑之前的SVG代码是：

        <text font-family="Times New Roman" font-size="100" font-weight="normal" style="stroke: rgb(221,95,96); stroke-width: 2; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,255,0); fill-rule: nonzero; opacity: 1;">
            <tspan x="-354.09" y="31.5" fill="#00ff00">Edit this and save</tspan>
        </text>

但当它变成：

         <text font-family="Times New Roman" font-size="100" font-weight="normal" style="stroke: rgb(221,95,96); stroke-width: 2; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,255,0); fill-rule: nonzero; opacity: 1;">
            <tspan x="-295.75" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">E</tspan>
            <tspan x="-234.66" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">d</tspan>
            <tspan x="-184.66" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">i</tspan>
            <tspan x="-156.88" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">t</tspan>
            <tspan x="-129.1" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"> </tspan>
            <tspan x="-104.1" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">l</tspan>
            <tspan x="-76.33" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"> </tspan>
            <tspan x="-51.33" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">a</tspan>
            <tspan x="-6.94" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">n</tspan>
            <tspan x="43.06" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">d</tspan>
            <tspan x="93.06" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"> </tspan>
            <tspan x="118.06" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">s</tspan>
            <tspan x="156.97" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">a</tspan>
            <tspan x="201.36" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">v</tspan>
            <tspan x="251.36" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;">e</tspan>
        </text>

这对我们来说是个大问题，但我不知道如何解决。任何帮助都将不胜感激。

Answer 1

可以使用复苏器函数修改输出SVG标记。在您的示例中，您可以使用它删除stroke-width: 0：

function reviver(markup) {
  return markup.replace(/stroke-width: 0;/g, "");
}

document.getElementById('btn').onclick = function () {
  document.getElementById('svg').innerHTML = canvas.toSVG({}, reviver);
}

演示：https://jsfiddle.net/LukaszWiktor/s35fxaby/