SVG <text>绘制文本

2017-9-7 10:13| 发布者: admin| 查看: 711| 评论: 0|来自: 钱柜手机网页版

svg中的文本和其他图形元素一样,能够对其进行描边和填充操作。

同时,它们又是真正的文本,可以对它们进行选中或者复制黏贴等操作,并且也能够被搜索引擎所识别。

使用<text>元素可以绘制SVG文本,下面分步对齐进行一下介绍。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="0" y="0">antzone</text>
</svg>
</body>
</html>

我们绘制了一段字符串,并且设置<text>元素的x和y坐标都为0。

按照一贯的认知,可能认为文本会被绘制在矩形框内部的左上角,然而事实是文本被绘制在外层。

这是因为y规定的是文本基线的坐标,可以参阅line-height属性的行内框和行框等内容介绍一章节。

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="0 20 40 60" y="20 40">antzone</text>
</svg>
</body>
</html>

以x="0 20 40 60"为例,0规定第一个字符"a"距离左侧的距离,"20"规定第二个字符"n"距离左侧的距离,以此类推,如果数列用完,那么剩余的字符都会紧随其后排列,对于y数列也是如此。

x和y属性值也可以是百分比数字,参考对象是viewport视窗的尺寸,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="50%" y="50%">antzone</text>
</svg>
</body>
</html>

上面的x和y规定的是绝对坐标值,我们可以使用dx和dy规定相对坐标值,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="10 30" y="0" dx="10,30" dy="10,20">antzone</text>
</svg>
</body>
</html>

dx和dy用法基本和x与y相同,但是它们是一个相对值,它们相对于字符的当前位置累积一个偏移。

例如上面的代码,字符"a"当前x轴坐标是10,那么dx中规定的10就是在这个基础上的累积(10+10)。

同样,dx和dy参数值也可以是百分比,参考对象也是viewport视窗的尺寸,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border:1px solid red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="50%" y="50%" dx="50%">antzone</text>
</svg>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部