使用toSVG后fabricjs IText缺少笔画答案

【问题标题】：fabricjs IText missing stroke after using toSVG使用toSVG后fabricjs IText缺少笔画
【发布时间】：2016-12-23 17:57:45
【问题描述】：

在将 toSVG 与 IText 一起使用时，fabricjs 中似乎存在错误。当更改具有笔划的 IText 时，fabricjs 将所有字符分成单独的 tspan，笔划宽度 = 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>

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

【问题讨论】：

很抱歉，我无法重现您的场景。
我是 Inferon，谢谢你的评论。如果您可以尝试通过添加新字母来编辑文本两次。它发生在所有浏览器和系统上。
这个错误发生在我身上。向 FabricJS 人员询问这个错误不是更好吗？
是的，但是他们很忙，所以希望在官方修复发布之前有人知道修复。

标签： javascript svg fabricjs

【解决方案1】：

您可以使用reviver 函数来修改输出的 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/

【讨论】：