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

SVG 文本排版

2018-8-10 00:21| 作者: admin| 查看: 1848| 评论: 0|来自: 蚂蚁部落

本章节介绍一下SVG文本排版的相关知识内容。

一.text-anchor:

此属性规定文本的哪个部分放置在text元素中的x属性定义的位置。

默认是文字左边部分,即文字的开始处。

你也可以设置为middle,使它位于文字的中间;设置为end,使它位于文字的右边。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/10/002203f8wfwkrhztetwrdz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码实例如下:

[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;
  font-size:20px;
}
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="50" y="20" style="text-anchor:start">
    Start
  </text>
  <text x="50" y="40" style="text-anchor:middle">
    Middle
  </text>
  <text x="50" y="60" style="text-anchor:end">
    End
  </text>
</svg>
</body>
</html>

二.letter-spacing属性:

此属性功能和css的letter-spacing完全相同,用来规定字符之间的距离。

代码实例如下:

[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;
  font-size:20px;
}
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="50" y="20" letter-spacing="4">
    antzone
  </text>
</svg>
</body>
</html>

我们也可以使用与css对应的letter-spacing来设置,如下:

[CSS] 纯文本查看 复制代码
text {
  letter-spacing:4px;
}

三.word-spacing属性:

用来设置单词的间距和css的word-spacing功能相同,代码实例如下:

[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;
  font-size:20px;
}
 
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="50" y="20" word-spacing="10">
    antzone is a word
  </text>
</svg>
</body>
</html>

我们也可以使用与css对应的letter-spacing来设置,如下:

[CSS] 纯文本查看 复制代码
text {
  word-spacing:10;
}

三.writing-mode属性:

此属性可以规定文本的书写方向。

[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;
  font-size:20px;
}
 
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="50" y="20" writing-mode="tb">
    蚂蚁部落
  </text>
</svg>
</body>
</html>

上面只演示了tb(Top to Bottom)属性值,其他属性值,大家可以自行测试。


鲜花

握手

雷人

路过

鸡蛋
返回顶部