Zi 字媒體

此篇文章瀏覽量： 60 使用 svg 中的 textPath 元素，來建立文字，並指定文字的路線該如何呈現。 概念 使用 path 定義好路徑之後，可以使用 textPath 元素來指定文字要遵循該路徑，而 textPath 通常會放在 text 元素之內。 例如我們先使用 defs 元素，將所要定義的東西，放在 defs 元素內。這裡定義一個 path 的路徑，如下定義方式(路徑的 id 為 MyPath)： 然後使用 text 及 textPath 元素，來指定要畫上的文字以及路徑，在 textPath 上，使用 xlink:href 來指定所要遵循的路徑為 MyPath： Wow such a nice SVG tut 另外可以使用 use 元素，來畫出路徑的那條線(指定 xlink:href 為 MyPath)，如下： 範例 整合起來，如下範例，當中有些尚未提到的，例如 viewBox、xmlns、xmlns:xlink 我們會在後續的章節中陸續揭曉： 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Facebook Twitter