2

如何使路径上的文本（见屏幕截图）扩展，使其跟随整个 textPath？

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

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

4

1 回答 1

3

在整个 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

于 2012-11-27T14:54:55.540 回答