在SVG中获取与路径内联的文本而不删除删除线

我正试图让文本出现在行内，以便与行间的连接不受阻碍，如下图所示

仅仅将该行用作图像的文本路径是不起作用的，因为当我将文本内联时，该行将继续通过文本。

我有一个解决方案，适用于直线路径。我测量文本长度和完整路径长度，然后将其拆分为3个单独的路径。我在第一和第三条路径上画了一个笔划，中间的路径用于文本路径

除了直线路径之外，我无法让它在任何情况下工作，因为我无法测量文本或计算出每个部分的长度

---

我使用的是JointJS，但是一个纯伪代码/SVG答案也同样有用。

解决这个问题的一个方法是创建一个与文本长度相同的文本块，它只是一个填充等于背景色的Unicode块字符，并在绘制实际文本路径之前绘制它。（需要添加膨胀过滤器以覆盖由圆弧/曲线引起的瑕疵-可能需要根据需要调整半径）

████████████████████
想象一下

解决此问题的一种方法是创建一个与文本长度相同的文本块，该文本块只是一个填充等于背景色的Unicode块字符，并在绘制实际文本路径之前绘制该文本块。（需要添加膨胀过滤器以覆盖由圆弧/曲线引起的瑕疵-可能需要根据需要调整半径）

████████████████████
想象一下

最简单的解决方案就是在行的顶部和文本的下方放置一个白色（或任何背景色）矩形

带箭头的内联文本

最简单的解决方案就是在行的顶部和文本的下方放置一个白色（或任何背景色）矩形

带箭头的内联文本

根据Michael Mullany和Paul LeBeau的回答，我已经在JointJS中实现了这一点，因此我发布了所需的更改

定义扩展

joint.dia.Link

的新形状模型，例如：

joint.shapes.gary.InlineLabelLink

使用两个新文本字段扩展形状模型中的标记。一个用于标签（inlineText），一个用于位于标签后面的掩码（inlineTextMask）

添加一些属性以确保文本位于需要的位置

添加一个名为“caption”的新属性，该属性将保存内联标签文本

例如：

更新的视图类从链接获取路径，然后将此路径应用于文本掩码和文本属性。它使用矢量器的text方法创建适当的defs、textPath和tspan条目

这确实存在一个问题，即根据链接的方向，文本有时可能会颠倒。这可以通过反转路径的方向来解决

我已经为此使用了一个定制函数（未显示），但还有一些库，如和

---

使用Michael Mullany和Paul LeBeau的答案，我已经在JointJS中实现了这一点，因此我发布了所需的更改

定义扩展

joint.dia.Link

的新形状模型，例如：

joint.shapes.gary.InlineLabelLink

使用两个新文本字段扩展形状模型中的标记。一个用于标签（inlineText），一个用于位于标签后面的掩码（inlineTextMask）

添加一些属性以确保文本位于需要的位置

添加一个名为“caption”的新属性，该属性将保存内联标签文本

例如：

更新的视图类从链接获取路径，然后将此路径应用于文本掩码和文本属性。它使用矢量器的text方法创建适当的defs、textPath和tspan条目

这确实存在一个问题，即根据链接的方向，文本有时可能会颠倒。这可以通过反转路径的方向来解决

我已经为此使用了一个定制函数（未显示），但还有一些库，如和

---

很好的解决方案。对于单词之间的间隙，我用Micheal建议的unicode块字符替换了白色文本中的空格，结果正是我所需要的。很好的解决方案。对于单词之间的间隙，我用Micheal建议的unicode块字符替换了白色文本中的空格，结果正是我所需要的。

joint.shapes.gary.InlineLabelLink = joint.dia.Link.extend({

    defaults: joint.util.deepSupplement({
    markup: [
        '<path class="connection" stroke="black" d="M 0 0 0 0"/>',
        '<path class="marker-source" fill="black" stroke="black" d="M 0 0 0 0"/>',
        '<path class="marker-target" fill="black" stroke="black" d="M 0 0 0 0"/>',
        '<path class="connection-wrap" d="M 0 0 0 0"/>',
        '<text class="inlineTextMask" />',
        '<text class="inlineText" />',
        '<g class="labels"/>',
        '<g class="marker-vertices"/>',
        '<g class="marker-arrowheads"/>',
        '<g class="link-tools"/>'
    ].join(''),
    attrs: {
        '.inlineText': {
            'dominant-baseline': 'central',
            'text-anchor': 'middle',
            'pointer-events': 'none',
            'font-size': 10
        },
        '.inlineTextMask': {
            'dominant-baseline': 'central',
            'text-anchor': 'middle',
            'pointer-events': 'none',
            'fill':'#ffffff',
            'stroke':'#ffffff',
            'stroke-linejoin':'smooth',
            'stroke-linecap':'round',
            'stroke-width': 8,
            'font-size': 10
        }
    },
    caption: 'TBD'
}, joint.dia.Link.prototype.defaults)});

joint.shapes.gary.InlineLabelLinkView =  joint.dia.LinkView.extend({

    update: function() {
        joint.dia.LinkView.prototype.update.apply(this, arguments);

        var inlinePath = this._V.connection.node.getAttribute('d');


        this._V.inlineText.text(this.model.get('caption'),
            {textPath: { d: inlinePath, startOffset:"50%" } });

        this._V.inlineTextMask.text(this.model.get('caption').replace(' ','\u9608'),
            {textPath: { d: inlinePath, startOffset:"50%" } });

        return this;
    }
});

    if (this.sourcePoint.x > this.targetPoint.x) {
        inlinePath = reversePath(inlinePath);
    }