如何在SVG中沿着整個文本路徑擴展文本

如何擴展路徑上的文本（see screenshot）以便它跟隨整個textPath？如何在SVG中沿着整個文本路徑擴展文本

我嘗試過使用method attribute的值stretch，但它不像我所期望的那樣工作 - 它不會沿着路徑拉伸文本。

有沒有一種方法可以在所有瀏覽器中使用此工作？

來源

2012-11-26 marksman

你的意思是使文本適合所有的方式沿着路徑的整個長度？或者你在談論'method'屬性，http://www.w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute？ –

是的，我的意思是方法屬性 - [鏈接]（http://www.w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute） – marksman

這裏是截圖[linlk]（http://yadi.sk/d/Hcn85Jxh0unbg）。我的問題是我不能通過屬性方法延伸 – marksman

在整個textPath上分散文本的方法是使用textLength屬性。有關如何計算textLength的良好值，請參閱this other question。以下是如何做到這一點：

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

enter image description here

下面是Firefox中的錯誤報告不支持textLength：https://bugzilla.mozilla.org/show_bug.cgi?id=569722

來源

2012-11-27 14:54:55

如何在SVG中沿着整個文本路徑擴展文本

回答

相關問題