SVG textpath, определить, когда текст выходит за пределы пути

Question

У меня есть код ниже для отображения текста вдоль пути.Я планирую сделать что-то динамическое, где я могу просто ввести то, что я хочу, и он отображает это по пути.Пока не выяснили, как это сделать, любые предложения будут в основном приветствоваться.

Однако мой вопрос в том, как мне точно определить, в какой момент текст выходит за пределы конца пути и больше недисплей.Идея в том, что когда он работает динамически, если пользователь вводит предложение длиннее, чем то, что может обработать путь, он скажет вам, что текст будет обрезан с определенной точки.в этом случае пользователь видит только слова «быстрый бурый песец», поэтому я хочу, чтобы сообщение об ошибке «ps over 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>

Answer 1

Вы можете запросить вычисленную длину строки, которая должна идти по пути, и длину пути. Затем сравните их, если длина строки больше длины пути, тогда текст будет отклонен от пути.

Вы также можете использовать знание длины пути, чтобы сжать строку, чтобы соответствовать, как это:

<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

Существует способ обнаружения переполнения текста, который работает в Chrome: вызовите getStartPositionOfChar для вашего элемента textPath для первого и последнего символьных индексов (если они есть), а в случае переполнения функция простовернуть объект, координаты которого являются исходными {x: 0, y: 0}.

. Затем вы можете линейно / двоично искать свой путь к решению, как предложено в других ответах.Это более точно, чем getComputedTextLength, однако не работает в Firefox;по какой-то причине браузер попытается экстраполировать позиции и вернуть ненужные значения.

Answer 3

Мне пришлось настроить его так, чтобы он работал как положено:

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