SVG textpath、テキストがパスを超えたときを判断する

Question

パスに沿ってテキストを表示するためのコードがあります。私はちょうど私がほしいと思うものをタイプすることができ、それは経路に沿ってそれを表示する動的な並べ替えをすることを計画しています。それをどうやってやってもうまくいかない、提案は大体歓迎されるだろう。

しかし、私の質問は、テキストがパスの終わりを超えて表示されなくなった時点を正確にどのように見つけ出すかです。アイデアは、私はそれが動的に働いているとき、ユーザーがパスが処理できるよりも長い文章を入力した場合、それはテキストが特定の点から切り取られることを伝えます。この場合、ユーザーは「クイックブラウンキツネジャム」という言葉しか見ませんが、「怠惰な犬の上のps」と言ってもよいエラーメッセージが表示されます。長すぎる、とあなたが道に行くべき文字列と、パスの長さの計算された長さを照会することができ、完全な「

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 500 300" version = "1.1"> 
    <defs> 
     <path id = "s3" d = "M 10,90 Q 100,15 200,70 "/> 
    </defs> 
    <g> 
     <text font-size = "20"> 
      <textPath xlink:href = "#s3"> 
       The quick brown fox jumps over the lazy dog     
      </textPath> 
     </text> 
     <use x = "0" y = "0" xlink:href = "#s3" stroke = "black" fill = "none"/> 
    </g> 
</svg> 

Answer 1

には表示されません。次に、2つを比較します。文字列の長さがパスの長さよりも長い場合、テキストはパスから外れます。

また、このように、合わせて文字列を圧迫する経路長の知識を使用することができます。

<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <path id="s3" d="M 10,90 Q 100,15 200,70 "/> 
    </defs> 
    <g> 
     <text font-size="20"> 
      <textPath xlink:href="#s3" textLength="204" lengthAdjust="spacingAndGlyphs"> 
       The quick brown fox jumps over the lazy dog     
      </textPath> 
     </text> 
     <use x="0" y="0" xlink:href="#s3" stroke="black" fill="none"/> 
    </g> 
</svg> 

はここで文字列の長さは、フォントサイズを小さくすることによって操作される例を示します

<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <path id="s3" d="M 10,90 Q 100,15 200,70 "/> 
    </defs> 
    <g> 
     <text font-size="20" font-family="Arial,Helvetica,sans-serif"> 
      <textPath id="tp" xlink:href="#s3" lengthAdjust="spacingAndGlyphs"> 
       The quick brown fox jumps over the lazy dog 
      </textPath> 
     </text> 
     <use x="0" y="0" xlink:href="#s3" stroke="black" fill="none"/> 
    </g> 
    <script><![CDATA[ 
     var textpath = document.getElementById("tp"); 
     var path = document.getElementById("s3"); 
     var fontsize = 20; 
     while (textpath.getComputedTextLength() > path.getTotalLength()) 
     { 
      fontsize -= 0.01; 
      textpath.setAttribute("font-size", fontsize); 
     } 
    ]]></script> 
</svg> 

Answer 2

私は予想ほど動作するようにそれを微調整する必要がありました：

 var textpath = document.getElementById("tp"); 
     var path = document.getElementById("s3"); 
     var fontsize = 20; 
     while ((textpath.getComputedTextLength()*1.50) > path.getTotalLength()) 
     { 
      fontsize -= 0.01; 
      textpath.setAttribute("font-size", fontsize); 
     }