SVG文本路径，确定文本何时超出路径 [英] SVG textpath, determine when text goes beyond the path

问题描述

我已经得到了下面的代码来沿着路径显示文本。我打算做一些动态的事情，我只需输入我想要的内容，然后沿着路径显示它。还没有制定出如何做到这一点，任何建议都会受到欢迎。

I have got the below code to display text along a path. I am planning to make sort of dynamic where I can just type in what i want and it displays it along the path. Haven't worked out how to do that yet, any suggestions would be mostly welcome.

然而，我的问题是，我怎样才能确切地知道文本的内容超出路径的尽头而不再显示。这个想法是当我让它动态工作时，如果用户输入的句子比路径能够处理的时间长，它会告诉你文本将从某个特定点被切断。在这种情况下，用户只能看到快速的棕色狐狸jum这个词，前面我想让错误信息说ps over the lazy dog不能显示，或者至少在说话的时候最少这句话是

However my question is, how do I find out exactly at what point the text goes beyond the end of the path and no longer display. The idea is when I have it working dynamically, if the user types a sentence longer than what the path can handle, it will tell you that the text will be cut off from a certain point. in this case the user only sees the words "The quick brown fox jum", the fore I want the error message to say "ps over the lazy dog" could not be displayed or at least at a minimum to the say "The sentence is too long, and is not displayed in full"

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

推荐答案

您可以查询计算出的字符串长度走在路径上，路径的长度。然后比较这两个，如果字符串长度比路径长度长，那么文本会从路径中脱落。

You can query the computed lengths of the string that should go on the path, and the length of the path. Then compare the two, if the string length is longer than the path length then text will fall off the path.

您也可以使用路径长度的知识来挤压适合的字符串，如下所示：

You can also use the knowledge of the path length to squeeze the string to fit, like this:

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

下面是一个通过减小字体大小来控制字符串长度的示例：

Here's an example where the string length is manipulated by decreasing the font-size:

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

这篇关于SVG文本路径，确定文本何时超出路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！