有没有办法确定 SVG TextPath 的哪一部分被剪裁了
[英]Is there a way to identify which part of a SVG TextPath was clipped
问题描述
I have a SVG textPath shown below.
我有一个 SVG textPath 如下所示。
<text class="text" dominant-baseline="middle" style="font-size: 0.3em">
<textPath class="text-path" href="#2abd837a-0">Cats and dogs</textPath>
</text>
This textPath is correctly showing the clipped based on the length of the path referenced by #2abd837a-0.此 textPath 根据 #2abd837a-0 引用的路径长度正确显示剪辑。
How would I go about using javascript to find the length of the clipped and invisible text?我将如何 go 关于使用 javascript 来查找剪辑和不可见文本的长度？ Is this even possible?这甚至可能吗？
1 个解决方案
解决方案1
0 已采纳 2020-05-06 17:40:41
You can calculate the text length by using the getComputedTextLength method.您可以使用getComputedTextLength方法计算文本长度。 you can calculate the path length by using the getTotalLength method.您可以使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.