SVG基础 | SVG TSPAN 元素

时间：2016-03-08
1.jpg

　　上一篇文章中我们介绍了如何绘制SVG文本，那么如何绘制多行文本呢?SVG 的<tspan>元素用于绘制SVG多行文本。我们不必每行文本都使用绝对定位来排列制作多行文本，使用<tspan>元素可以非常方便的使一行文本相对于另一行文本来定位。使用<tspan>元素还可以使用户在同一时间里选择和复制多行文字。

　　TSPAN示例
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="10">
  3.       <tspan>tspan line 1</tspan>
  4.       <tspan>tspan line 2</tspan>
  5.   </text>
  6. </svg>  
复制代码

　　下面是上面代码的返回结果：
2.jpg
　　注意上面的返回结果中，由于<tspan>元素没有设置其它参数，默认情况下第二行文字会紧跟着第一行文字排列。

　　垂直定位

　　如果你希望每一行文字都相对于前一行文字垂直定位，你可以在元素中使用dy属性(delta y)：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="10">
  3.       <tspan>tspan line 1</tspan>
  4.       <tspan dy="10">tspan line 2</tspan>
  5.   </text>
  6. </svg>     
复制代码

　　现在第二行文字会显示在第一行文字下方，距离为10像素。下面是上面代码的返回结果：
3.jpg
　　如果你希望<tspan>元素在text中在垂直方向绝对定位某个指定的数值，可以设置<text>元素的y属性。

　　如果你在<ty>属性中写了多个数字，那么每一个数字会被应用到<tspan>元素的每一个字符上。看下面的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <tspan dy="5 10 20">123</tspan>
  3. </svg>
复制代码

　　下面是返回结果，注意各个字符在垂直方向上的变化。
4.jpg
　　水平定位

　　要使每一行文本在X轴方向上相对定位可以使用dx属性(delta x)。下面的例子展示了将dx的值设置为30的效果，现在第二行文字在水平方向上相对于第一行文字向右偏移了30像素。
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="10">
  3.       <tspan>tspan line 1</tspan>
  4.       <tspan dx="30" dy="10">tspan line 2</tspan>
  5.   </text>
  6. </svg>      
复制代码
5.jpg
　　如果你在<dx>属性中写了多个数字，那么每一个数字会被应用到<tspan>元素的每一个字符上。看下面的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <tspan dx="5 10 20">123</tspan>
  3. </svg>  
复制代码

　　下面是返回结果，注意各个字符在水平方向上的变化。
6.jpg
　　你可以在<tspan>元素设置x属性来修正<text>元素的X坐标。使用这种方法你可以显示多行头部对齐的文字。来看下面的例子，x属性设置为10：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text y="10">
  3.       <tspan x="10">tspan line 1</tspan>
  4.       <tspan x="10" dy="15">tspan line 2</tspan>
  5.       <tspan x="10" dy="15">tspan line 3</tspan>
  6.   </text>
  7. </svg>      
复制代码

　　下面是上面代码的返回结果：
7.jpg
　　为TSPAN元素添加样式

　　我们可以为<tspan>元素添加样式，例如你可以将一个<tspan>元素中的文字设置为加粗字体：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text y="10">
  3.     这是一个被 <tspan style="font-weight: bold;">加粗</tspan> 的文字。
  4.   </text>
  5. </svg>     
复制代码

　　下面是上面代码的返回结果：
8.jpg
　　通过BASELINE-SHIFT设置上标和下标效果

　　你可以通过baseline-shift CSS属性将一个<tspan>元素设置为上标或下标。看下面的例子：
  1. <text x="10" y="20">
  2.     这是一个tspan元素的 <tspan style="baseline-shift: super;">上标</tspan>
  3.     和 <tspan style="baseline-shift: sub;">下标</tspan> 混合的文本串效果。
  4. </text>      
复制代码

　　效果如下：
9.jpg
　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506091997.html

上一篇：SVG基础 | 绘制SVG直线、折线和多边形 下一篇：SVG基础 | 绘制SVG文字

相关文章

最新文章

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