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文本路径，确定何时文本超出路径

回答

相关问题