SVG 元素用于將一串文本放置到一條指定的路徑上。例如可以將文本串放置到一個圓上，做出非常酷的效果。對于不同的瀏覽器，路徑文字的效果也略有不同。下面是一個簡單的路徑文字的例子：
- <svg xmlns="http://www.w3.org/2000/svg">
- <defs>
- <path id="myTextPath"
- d="M75,20
- a1,1 0 0,0 100,0
- "
- />
- </defs>
- <text x="10" y="100" style="stroke: #000000;">
- <textPath xlink:href="#myTextPath" >
- Text along a curved path...
- </textPath>
- </text>
- </svg>
下面是上面代碼的返回結果：
元素中的路徑有一個ID屬性。這個ID屬性被元素的xlink:href屬性引用，作為文字的路徑。
注意如果路徑的長度小于文本的長度，那么只有在路徑內的文字會被繪制。
你也可以使用更復雜的路徑，下面是一個比較復雜的路徑制作路徑文字的例子：
- <defs>
- <path id="myTextPath2"
- d="M75,20 l100,0 l100,30 q0,100 150,100"/>
- </defs>
- <text x="10" y="100" style="stroke: #000000;">
- <textPath xlink:href="#myTextPath2">
- Text along a more advanced path with lines and curves.
- </textPath>
- </text>
這個例子中。路徑包括一條直線，一條斜線和一條曲線，得到的結果如下所示：
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506102008.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。