html – SVG文本路径,确定文本何时超出路径

概述我有以下代码在路径上显示文本.我打算做一些动态,我可以输入我想要的东西,然后沿路径显示它.还没有找到如何做到这一点,任何建议都将受到欢迎. 不过我的问题是,如何准确地找出文本超出路径末尾的位置,并且不再显示.这个想法是当我让它动态工作时,如果用户输入的句子长于路径可以处理的句子,它会告诉你文本将从某个点切断.在这种情况下,用户只能看到“快速的棕色狐狸jum”这个词,我想要错误信息说“ps over 我有以下代码在路径上显示文本.我打算做一些动态,我可以输入我想要的东西,然后沿路径显示它.还没有找到如何做到这一点,任何建议都将受到欢迎.

不过我的问题是,如何准确地找出文本超出路径末尾的位置,并且不再显示.这个想法是当我让它动态工作时,如果用户输入的句子长于路径可以处理的句子,它会告诉你文本将从某个点切断.在这种情况下,用户只能看到“快速的棕色狐狸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>

解决方法 您可以查询应该在路径上的字符串的计算长度以及路径的长度.然后比较两者,如果字符串长度比路径长度长,那么文本将从路径上掉下来.

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

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

这是一个通过减小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,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>

总结

以上是内存溢出为你收集整理的html – SVG文本路径,确定文本何时超出路径全部内容，希望文章能够帮你解决html – SVG文本路径,确定文本何时超出路径所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。