SVG基础 | SVG TEXTPATH 元素

时间：2016-03-08
1.jpg

　　SVG 元素用于将一串文本放置到一条指定的路径上。例如可以将文本串放置到一个圆上，做出非常酷的效果。对于不同的浏览器，路径文字的效果也略有不同。下面是一个简单的路径文字的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.       <path id="myTextPath"
  4.             d="M75,20
  5.                a1,1 0 0,0 100,0
  6.              "
  7.               />
  8.   </defs>

  10.   <text x="10" y="100" style="stroke: #000000;">
  11.     <textPath xlink:href="#myTextPath" >
  12.           Text along a curved path...
  13.     </textPath>
  14.   </text>
  15. </svg>           
复制代码

　　下面是上面代码的返回结果：
2.jpg
　　元素中的路径有一个ID属性。这个ID属性被元素的xlink:href属性引用，作为文字的路径。

　　注意如果路径的长度小于文本的长度，那么只有在路径内的文字会被绘制。

　　你也可以使用更复杂的路径，下面是一个比较复杂的路径制作路径文字的例子：
  1. <defs>
  2.     <path id="myTextPath2"
  3.           d="M75,20 l100,0 l100,30 q0,100 150,100"/>
  4. </defs>

  6. <text x="10" y="100" style="stroke: #000000;">
  7.     <textPath xlink:href="#myTextPath2">
  8.         Text along a more advanced path with lines and curves.
  9.     </textPath>
  10. </text>           
复制代码

　　这个例子中。路径包括一条直线，一条斜线和一条曲线，得到的结果如下所示：
3.jpg

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506102008.html

上一篇：SVG基础 | SVG SWITCH 元 下一篇：SVG基础 | SVG PATH 元素

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权