如何在 SVG 中沿整个 textPath 扩展文本答案

【问题标题】：How to extend the text along the entire textPath in SVG如何在 SVG 中沿整个 textPath 扩展文本
【发布时间】：2012-11-14 00:00:22
【问题描述】：

如何使路径 (see screenshot) 上的文本扩展，使其跟随整个 textPath？

我尝试使用 method attribute 值 stretch，但它并没有像我预期的那样工作 - 它不会沿路径拉伸文本。

有没有办法让它在所有浏览器中都能正常工作？

【问题讨论】：

您的意思是使文本一直适合整个路径长度吗？还是您在谈论method 属性w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute？
是的，我的意思是方法属性 - link
这里是截图linlk。我的问题是我无法通过属性方法拉伸
你追求的是这个效果吗：jsfiddle.net/zkZ2n？（适用于 Opera 和 Chrome）
是的，这就是我想要的。但它对其他支持 svg 的浏览器有何影响？

标签： javascript svg

【解决方案1】：

在整个 textPath 上展开文本的方法是使用textLength 属性。另请参阅 this other question 了解如何计算 textLength 的良好值。操作方法如下：

<svg viewBox="0 0 500 300" version="1.1">
     <defs>
         <path id="s3" d="M 10,90 Q 100,15 200,70" />
     </defs>
     <text font-size="20">
         <textPath xlink:href="#s3" textLength="205">
           Short text
         </textPath>
     </text>
     <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
 </svg>

可见示例：http://jsfiddle.net/zkZ2n/

这里是 Firefox 不支持 textLength 的错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=569722

【讨论】：