检查 SVG 文本路径和 jquery 上的文本溢出

Question

首先，我在这里查看了所有可能的相关答案，但似乎没有一个能带来我需要的答案，所以我在这里。 给定一个 svg 文本路径：

 <svg viewBox="0 0 900 900" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg" > <defs> <path id="myPath" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> </defs> <use xlink:href="#myPath" fill="none" stroke="red" /> <text id="names" font-family="Verdana" font-size="10" text-anchor="middle" > <textPath xlink:href="#myPath" startOffset="50%"> My text is going to exceed at some point… </textPath> </text> </svg>

此时文字超出了textpath

我找不到通过 jquery 检查可能溢出的方法。 这个命令实际上不会返回 undefined：

 alert($("text#names").attr("textLength") );

我正在尝试检查溢出，以使文本适合最大长度左右。

Answer 1

我在调整字体大小时遇到​​了同样的问题，以便给定的文本将以尽可能大的字体大小绘制而不会溢出。 使用普通JS非常简单。

1）确定np。 具有最小字体大小的文本元素中的字符数：

textElement.css('font-size', 1);                                                        
var allCharCount = textElement[0].getNumberOfChars();                                   

2）然后将字体大小设置为任意值并再次确定长度

var hasOverflow = allCharCount != textElement[0].getNumberOfChars();                

getNumberOfChars() 只会返回编号。 绘制的字符。 如果发生溢出，此数字将小于原始整个字符串。

Answer 2

看起来text.getNumberOfChars()自从编写另一个答案以来已经改变，现在返回字符串中的总字符数，无论它们是否被呈现。

我解决这个问题的方法是：

• 更改<textPath>元素以在更长的路径上绘制，然后使用text.getComputedLength()计算文本长度
• 将<textPath>回原来的路径，重新计算长度
• 如果原始路径上的长度比较长路径上的长度短，则您知道存在溢出。

 const textPath = document.querySelector('textPath'); const checkClipped = () => { textPath.setAttribute('xlink:href', '#fullWidthPath'); const fullLength = textPath.getComputedTextLength(); textPath.setAttribute('xlink:href', '#myPath'); const curvedLength = textPath.getComputedTextLength(); return fullLength > curvedLength; } const findLongestString = () => { const text = textPath.innerHTML; if (checkClipped()) { const newText = text.substring(0, text.length - 1); textPath.innerHTML = newText; return findLongestString(newText); } else { return text; } } console.log(findLongestString())

 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg"> <defs> <path id="myPath" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> <path id="fullWidthPath" d="M 0 0 L 0 10000" /> </defs> <use xlink:href="#myPath" fill="none" stroke="red" /> <text id="names" font-family="Verdana" font-size="10" text-anchor="middle" > <textPath xlink:href="#myPath" startOffset="50%"> My text is going to exceed at some point… </textPath> </text> </svg>