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

SVG <text>绘制文本

2018-9-24 00:28| 作者: admin| 查看: 2578| 评论: 0|来自: 蚂蚁部落

SVG与cavnas类似,都可以绘制文本,并且可以对文本的表现形式进行设置。

比如可以对SVG绘制的文本进行填充或者描边。

但是SVG绘制的文本域canvas绘制文本相比在某些场景下会更具有优势。

首先看一个canvas绘制文本截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/24/002719k68lal8hj18lijst.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

canvas绘制的文本本质上是以图片形式展现的,这样我们就无法进行选中或者赋值黏贴等操作,也不容易被搜索引擎识别(据说现在搜索引擎可以识别图片上的文本,估计当前效果也不是太好),对于搜索引擎优化也不太好。

而SVG绘制的文本是真正意义上的文本,与普通文本没有区别。

使用<text>元素可以实现绘制文本的效果,代码实例如下:

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

上面代码演示了最为简单的绘制效果,代码分析如下:

(1).绘制字符串"softwhy"。

(2).设置<text>元素的x和y属性值都为0,如果没有看到文本具体渲染效果,可能会认为文本会紧贴svg矩形框内部的左上角绘制,但实际下过是在水平方位没有疑问,在垂直方位

(3).出现上述效果的原因是,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 blue;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="0 10 40 60" y="20 40">softwhy</text>
</svg>
</body>
</html>

上面代码中,x和y的属性值是数列,下面对代码做一下分析。

(1).x与y属性值是一个数列。

(2).以x属性值为例子,0规定第一个字符"s"距离左侧的距离,10表示第二个字符"o"距离左侧的距离,以此类推。然而字符串有7个字符,但是数列中才有四个参数,那么四个参数应用于字符串中的前四个字符,剩余的字符紧贴最后一个字符依次排列,对于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 blue;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="50%" y="50%">softwhy</text>
</svg>
</body>
</html>

上面代码中,x和y属性值是百分比,参考值是viewport视窗的尺寸。

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

上面代码中,不但规定了x和y属性,而且还有dx和dy属性。

x和y规定的是位置的绝对值,而dx和dy则是规定的一个绝对值的增量。

例如字符"s"使用x属性规定距离左侧的绝对位置是10,那么它的最终位置要在10的基础上再加10。与x和y属性值类似,dx和dy的属性值也可以是百分比,参考viewport视窗的尺寸。


鲜花

握手

雷人

路过

鸡蛋
返回顶部