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

Question

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

我尝试使用method attribute值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的bug报告：https://bugzilla.mozilla.org/show_bug.cgi?id=569722