Question

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

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

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标记。在您的情况下，您可以使用它删除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/

fabricjs使用toSVG后IText缺少中风

1 个答案: