svg标签：标签和标签的应用（代码）

这篇文章给大家分享的内容是关于svg标签：<text >标签和<tspan>标签的应用（代码），有一定的参考价值，有需要的朋友可以从参考一下，希望对你有所帮助。

text 属性

x: 文本绘制x轴位置
y: 文本绘制y轴位置
dx: 每个字符相对前一个字符的偏移距离
dy: 每个字符相对前一个字符的偏移距离

<svg width=100% height=100% version=1.1 xmlns=http://www.w3.org/2000/svg>
     <text x=100 y=100 dy=100 fill=black style=font-size:40px;>
          <tspan fill=blue dy=-20 10>我是</tspan><tspan fill=red>中国人</tspan>
     </text>
     <path d=M100,0 V200 M0,100 H200 stroke=red/>
</svg>

文本水平垂直居中

水平排列

text-anchor属性可设置文本水平排列，有三个取值 start | middle | end

<svg width=100% height=100% version=1.1 xmlns=http://www.w3.org/2000/svg>
     <text x=200 y=50 text-anchor=start fill=black style=font-size:40px;>我是中国人</text>
     <text x=200 y=100 text-anchor=middle  fill=black style=font-size:40px;>我是中国人</text>
     <text x=200 y=150 text-anchor=end fill=black style=font-size:40px;>我是中国人</text>
     <path d=M200,0 V200 M0,100 H400 stroke=red/>
</svg>

<textpath> 标签

<textpath>可以让文本在指定路径上排列 。

<svg width=100% height=100% version=1.1 xmlns=http://www.w3.org/2000/svg>
     <path id=p1 d=M100,200 Q200 100 300 200 T 500 200 stroke=green fill=none/>
     <text style=font-size:20px;>
          <textPath xlink:href=#p1>我是根据固定曲线来绘制的文字方向</textPath>
     </text>
</svg>

超出Path的部分，浏览器不进行渲染。

文本在路径上的偏移可以用定位属性  x,  y,  dx,  dy，text-anchor  和  startOffset  属性 。

1. x/dx/startOffset可以设置字符在路径上的渲染起点。

2. y属性设置是没有任何效果的。

3. dy可设置字符在法线上的偏移。

4. text-anchor是设置文本水平排列效果。

相关文章推荐：

svg如何实现坐标系统变换（附代码）

svg中<marker>元素的使用及marker属性的介绍

以上就是svg标签：<text >标签和<tspan>标签的应用（代码）的详细内容，更多请关注双恒网络其它相关文章！