SVG文本路徑，確定何時文本超出路徑

我有下面的代碼來顯示文本沿路徑。我打算做一些動態的事情，我只需輸入我想要的內容，然後沿着路徑顯示它。還沒有制定如何做到這一點，任何建議將大多是受歡迎的。SVG文本路徑，確定何時文本超出路徑

但是我的問題是，我如何確切地知道文本在什麼點上超出了路徑的末尾，並且不再顯示。這個想法是當我讓它動態工作時，如果用戶輸入的句子比路徑能夠處理的時間長，它會告訴你文本將從某個特定點被切斷。在這種情況下，用戶只能看到「快速的棕色狐狸jum」這個詞，前面我想讓錯誤信息說「ps over the lazy dog」不能顯示，或者至少在說話的時候最少「這句話是太長，並沒有全部顯示「

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

來源

2011-07-23 Dinesh

您可以查詢計算出的路徑字符串長度和路徑長度。然後比較兩者，如果字符串長度比路徑長度長，則文本將從路徑上脫落。

您還可以使用路徑長度的知識擠字符串以滿足，就像這樣：

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

來源

2011-07-24 23:34:16

+1，這不正是* *真實的，雖然，因爲如果超過一半的字符脫離路徑，最後一個字符只會消失。所以'getComputedTextLength（）'在實際消失之前可以比'getTotalLength（）'略大。當你開始搞亂'text-anchor'或'startOffset'，或者開始在路徑上移動'tspan'時，它變得更加複雜。 – mercator

@mercator：你是對的，但是可以單獨測量每個字符並且更精確。 startOffset只設置路徑上的對齊點（沿路徑的百分比），文本錨設置如何在對齊點周圍對齊。這有點複雜，但我仍然可以用腳本來計算。 –

大家好！一個問題......如果我想讓文本等東西通過路徑溢出怎麼辦？對不起，如果這是一個愚蠢的問題，但我知道很少的SVG和溢出屬性是不是很明顯使用路徑...：S –

我不得不調整它像這樣按預期方式工作：

 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); 
     }

來源

2014-08-09 16:50:15 user2070775

SVG文本路徑，確定何時文本超出路徑

回答

相關問題