SVG基础|SVG TEXTPATH 元素

百变鹏仔 3个月前 (10-18) #H5教程

文章标签元素

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>

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

我们还可以制作路径文字动画，这要使用到元素，这个内容将在后面的文章中介绍，这里先来看一下它的效果：

文章推荐

SVG基础|SVG TEXTPATH 元素

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集