javascript - 如何在 SVG 中沿整个 textPath 扩展文本

Question

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

我试过使用 method attribute value stretch 但它没有像我预期的那样工作 - 它不会沿着路径拉伸(stretch)文本。

有没有办法让它在所有浏览器中工作？

Answer 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