有没有办法确定 SVG TextPath 的哪一部分被剪裁了

Question

我有如下所示的 SVG 文本路径。

<text class="text" dominant-baseline="middle" style="font-size: 0.3em">
<textPath class="text-path" href="#2abd837a-0">Cats and dogs</textPath>
</text>

此 textPath 正确地 显示了根据 #2abd837a-0 引用的路径长度剪裁的内容。

我将如何使用 javascript 来查找被剪裁和不可见文本的长度？这可能吗？

Answer 1

您可以使用getComputedTextLength方法计算文本长度。您可以使用 getTotalLength 方法计算路径长度。

let textLength = elText.getComputedTextLength();
let pathLength = abd837a.getTotalLength();
let invisibleTextLength = textLength > pathLength ? textLength - pathLength : 0;

console.log(textLength,pathLength,invisibleTextLength)

<svg viewBox="120 100 100 100">
<path id="abd837a" d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
<text id="elText" class="text" dominant-baseline="middle" style="font-size: 16px">  
  <textPath class="text-path" href="#abd837a">Cats and dogs</textPath>
</text>
</svg>

有没有办法确定 SVG TextPath 的哪一部分被剪裁了

Is there a way to identify which part of a SVG TextPath was clipped

javascript

svg

ecmascript-5