Question

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

＆＃13;

<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>

＆＃13;

此时文本超出文本路径

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

＆＃13;

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

＆＃13;

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

Answer 1

调整字体大小时遇到同样的问题，以便在没有溢出的情况下以尽可能大的字体大小绘制给定文本。使用普通JS非常简单。

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

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

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

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

getNumberOfChars（）只返回no。绘制的字符。如果有溢出，则此数字将小于原始整个字符串。

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>

检查SVG文本路径上的文本溢出＆amp; jquery的

2 个答案: