javascript - 使用 toSVG 后，fabricjs IText 缺少笔划

Question

将 toSVG 与 IText 一起使用时，fabricjs 中似乎存在错误。当更改具有笔划的 IText 时，fabricjs 将所有字符分解为笔画宽度 = 0 的单独 tspan。

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

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

您可以使用 reviver修改输出 SVG 标记的函数。在您的情况下，您可以使用它来删除 lines-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/