Fabric.js导出SVG缺失文本装饰属性问题求助

我碰到过不少Fabric.js开发者遇到这个问题——你给文本加了下划线、上划线或删除线，画布上显示正常，但导出SVG时这些装饰直接消失了。这是因为Fabric.js原生的文本对象是用Canvas绘制API来实现这些装饰的，默认导出SVG时并不会把这些样式映射到SVG标准的text-decoration属性上。

下面结合你的代码片段，一步步解决这个问题：

第一步：完善文本装饰的状态存储 #

首先，我们需要把用户选择的装饰状态（比如是否开启下划线）存储在文本对象的自定义属性里，方便后续导出SVG时读取。修改你的点击事件代码：

$('.text_decoration').click(function () {
    const $btn = $(this);
    $btn.toggleClass('highlight');
    const isActive = $btn.hasClass('highlight');
    const decorationType = $btn.attr('data-action'); // 对应'underline'/'overline'/'line-through'
    const tObj = canvas.getActiveObject();

    // 确保选中的是文本对象
    if (!tObj || !(tObj instanceof fabric.Text)) return;

    // 初始化装饰集合（支持同时开启多个装饰）
    if (!tObj.textDecorations) {
        tObj.textDecorations = new Set();
    }

    // 切换当前装饰的状态
    isActive ? tObj.textDecorations.add(decorationType) : tObj.textDecorations.delete(decorationType);

    // 更新画布渲染
    tObj.setCoords();
    canvas.renderAll();
});

第二步：重写Text对象的SVG序列化逻辑 #

Fabric.js允许我们重写对象的toSVG方法，让它导出时带上text-decoration属性。我们只需要在原生SVG输出的基础上，把存储的装饰状态转换成标准SVG属性：

// 保留原生的toSVG方法，避免完全覆写丢失原有功能
const originalTextToSVG = fabric.Text.prototype.toSVG;

// 重写toSVG方法，添加text-decoration属性
fabric.Text.prototype.toSVG = function() {
    const baseSVG = originalTextToSVG.call(this);
    
    // 如果有已激活的文本装饰，添加到SVG标签中
    if (this.textDecorations && this.textDecorations.size > 0) {
        const decorationStr = Array.from(this.textDecorations).join(' ');
        // 替换<text标签，插入text-decoration属性
        return baseSVG.replace(/<text /, `<text text-decoration="${decorationStr}" `);
    }
    
    return baseSVG;
};

第三步：测试验证 #

现在当你给文本设置装饰后，导出的SVG里的<text>元素会自动带上text-decoration属性，比如：

<text text-decoration="underline line-through" x="100" y="200" ...>
    <!-- 文本内容 -->
</text>

这样SVG渲染器就能正确识别并显示这些装饰了。

额外提示 #

如果你的文本是多行的，Fabric.js会把每行拆成<tspan>元素，但SVG的text-decoration属性会自动继承到子元素上，所以不需要额外处理多行场景。

内容的提问来源于stack exchange，提问作者DS9