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

SVG 旋转文本字符

2018-8-4 10:02| 作者: admin| 查看: 2133| 评论: 0|来自: 蚂蚁部落

关于文本的基本操作可以参阅SVG <text>绘制文本一章节。

<text>元素的rotate可以以指定角度旋转文本中的字符。

首先看一段代码实例:

[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="20" y="20" rotate="40">蚂蚁部落</text>
</svg>
</body>
</html>

rotate参数值是一个数列,用来规定旋转的度数,单位可以省略,默认是deg。

字符应用角度规则:

(1).如果只有一个参数,所有文本都旋转同一个角度。

(2).如果规定多个参数,第一个参数用于第一个字符,第二个参数用于第二个字符,以此类推。

代码实例如下:

[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="20" y="20" rotate="0 45 90">蚂蚁部落</text>
</svg>
</body>
</html>

特别注意:"落"没有显式规定旋转角度,那么它的旋转角度和前一个字符"部"相同。


鲜花

握手

雷人

路过

鸡蛋
返回顶部