SVG 元素用于將一串文本放置到一條指定的路徑上。例如可以將文本串放置到一個(gè)圓上，做出非常酷的效果。對(duì)于不同的瀏覽器，路徑文字的效果也略有不同。下面是一個(gè)簡單的路徑文字的例子：
- <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>
下面是上面代碼的返回結(jié)果：
元素中的路徑有一個(gè)ID屬性。這個(gè)ID屬性被元素的xlink:href屬性引用，作為文字的路徑。
注意如果路徑的長度小于文本的長度，那么只有在路徑內(nèi)的文字會(huì)被繪制。
你也可以使用更復(fù)雜的路徑，下面是一個(gè)比較復(fù)雜的路徑制作路徑文字的例子：
- <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>
這個(gè)例子中。路徑包括一條直線，一條斜線和一條曲線，得到的結(jié)果如下所示：
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506102008.html
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。