SVG에서 텍스트 오버 플로우 확인 textpath & 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. 이 명령은 실제로 정의되지 않은 반환하지 않습니다 : 나는 최대 길이 정도에 텍스트를 맞추기 위해 오버 플로우를 확인하기 위해 노력하고

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()를 결정합니다. 그려진 캐릭터들. 오버플로가 있으면이 숫자는 원래의 전체 문자열보다 작을 것입니다.