您的位置:首页> HTML5教程> SVG教程

SVG <tspan>元素

2018-9-3 10:09| 作者: admin| 查看: 3694| 评论: 0|来自: 蚂蚁部落

使用<text>可以实现文本的简单绘制,具体参阅SVG <text>绘制文本一章节。

但<text>绘制功能过于简单,很多常见的功能实现起来都比较困难,比如内部文本换行。

再比如单独设置文本某一部分的样式,也很困难,使用<tspan>可以有效的解决类似问题。

大家都对HTML的<span>元素比较熟悉,不妨认为<tspan>是SVG中的<span>元素。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>蚂蚁部落一</tspan>
    <tspan>蚂蚁部落二</tspan>
  </text> 
</svg>
</body>
</html>

<tspan>元素以行内元素方式顺序排列,中间是有一个空格。

特别说明:

(1).中间的空格并不是<tspan>元素天然的属性,而是由于换行导致的。

(2).<text>元素对于换行或者空格的处理与HTML的相同。

一.<tspan>的x和y属性:

用x和y属性可以对tspan元素的文本进行定位。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>蚂蚁部落一</tspan>
    <tspan x="10" y="0">蚂蚁部落二</tspan>
  </text> 
</svg>
</body>
</html>

x和y规定字符的绝对坐标(y规定字符基线位置,可以参阅line-height属性的行内框和行框等内容介绍一章节)。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>蚂蚁部落一</tspan>
    <tspan x="10 40" y="0 20">蚂蚁部落二</tspan>
  </text> 
</svg>
</body>
</html>

x和y的属性值也可以是一个数列,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>蚂蚁部落一</tspan>
    <tspan x="10 40" y="0 20">蚂蚁部落二</tspan>
  </text> 
</svg>
</body>
</html>

参数值的数字会依次作用于文本中的字符,如果数字不够用,后面字符都会紧随其后,对于y数列也是如此。

二.dx和dy属性:

x和y规定的是字符的绝对定位,dx和dy规定字符的相对位置。

dx和dy是相对于字符的当前坐标,然后进行一个累加,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan x="10 40" y="0 20" dx="10 20" dy="20 30">蚂蚁部落</tspan>
  </text> 
</svg>
</body>
</html>

与x和y属性相同,参数值是一个数列,下面介绍一下它是工作的:

(1).如果没有规定dx和dy属性,那么字符的位置是有x和y属性规定的。

(2).如果规定了dx或者dy,那么就会以字符的当前位置坐标作为参考,然后进行一个累积。

(3).以上面代码为例子,"蚂"字符的最终x坐标位置是x(10)+dx(10)=20。

三.设置tspan元素中文本样式:

这个和css方式非常类似,代码是来如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
tspan {
  font-size:20px;
  fill:red;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan x="10 40" y="0 20">蚂蚁部落</tspan>
  </text> 
</svg>
</body>
</html>

设置文本的颜色,不能够用color属性,而是使用fill属性。

四.旋转效果:

如果旋转效果应用于<text>元素,那么这个效果也会应用于所有内部<tspan>元素。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="80" rotate="20">
    <tspan >蚂蚁部落一</tspan>
    <tspan x="100" y="150" >蚂蚁部落二</tspan>
  </text> 
</svg>
</body>
</html>

其实rotate是将<tspan>元素作为一个字符来处理的,它旋转的就是内部的字符,而不是当前用户坐标系。

所以如果我们想把<tspan>元素扶正,那么只需要在<tspan>元素上添加rotate="0"即可,而不是设置rotate="-20"。


鲜花

握手

雷人

路过

鸡蛋
返回顶部