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

Solution 1:

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:

<svgviewBox="0 0 500 300"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><defs><pathid="s3"d="M 10,90 Q 100,15 200,70 "/></defs><g><textfont-size="20"><textPathxlink:href="#s3"textLength="204"lengthAdjust="spacingAndGlyphs">
                The quick brown fox jumps over the lazy dog                
            </textPath></text><usex="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:

<svgviewBox="0 0 500 300"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><defs><pathid="s3"d="M 10,90 Q 100,15 200,70 "/></defs><g><textfont-size="20"font-family="Arial,Helvetica,sans-serif"><textPathid="tp"xlink:href="#s3"lengthAdjust="spacingAndGlyphs">
                The quick brown fox jumps over the lazy dog
            </textPath></text><usex="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>

Solution 2:

I had to tweak it like so to work as expected:

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

Solution 3:

There is a trick to detect text overflow that works on Chrome: call getStartPositionOfChar on your textPath element for the first and last character indices (if there are such), and in case of an overflow the function simply will return an object which coordinates are the origin {x: 0, y: 0}.

Then you can linear/binary search your way to the solution as suggested by the other answers. It is more accurate than getComputedTextLength, however it does not work on Firefox; for some reason the browser will try to extrapolate the positions and return junk values.

Solution 4:

• set <path id="#P" pathLength="100" ...>

  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength

• set <textPath href="#P" startoffset="100" text-anchor="end">

  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

pathLength on other elements works in FireFox, not on Chromium (march 2021)

<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 200 40"><rectwidth="100%"height="100%"fill="beige"></rect><pathid="P"pathLength="100"d="M20 20h160"stroke="blue"></path><text><textPathhref="#P"startoffset="0"text-anchor="start">start</textPath></text><text><textPathhref="#P"startoffset="50"dominant-baseline="hanging"text-anchor="middle">middle</textPath></text><text><textPathhref="#P"startoffset="100"text-anchor="end">end</textPath></text></svg>