[SVG] 6. textPath 文字路徑元素

使用 svg 中的 textPath 元素,來建立文字,並指定文字的路線該如何呈現。

概念

使用 path 定義好路徑之後,可以使用 textPath 元素來指定文字要遵循該路徑,而 textPath 通常會放在 text 元素之內。

例如我們先使用 defs 元素,將所要定義的東西,放在 defs 元素內。
這裡定義一個 path 的路徑,如下定義方式(路徑的 id 為 MyPath):

<defs>
  <path id="MyPath" d="M 20 40 Q 260 240 400 500" />
</defs>

然後使用 text 及 textPath 元素,來指定要畫上的文字以及路徑,在 textPath 上,使用 xlink:href 來指定所要遵循的路徑為 MyPath

<text font-family="Courier New" font-size="42.5">
  <textPath xlink:href="#MyPath">
    Wow such a nice SVG tut
  </textPath>
</text>

另外可以使用 use 元素,來畫出路徑的那條線(指定 xlink:href 為 MyPath),如下:

<use xlink:href="#MyPath" fill="none" stroke="#59fa81" />

範例

整合起來,如下範例,當中有些尚未提到的,例如 viewBox、xmlns、xmlns:xlink 我們會在後續的章節中陸續揭曉:

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of