快捷导航

栏目导航

SVG 旋转文本字符

2018-2-6 10:57| 发布者: admin| 查看: 534| 评论: 0|来自: 钱柜手机网页版

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

<text>的rotate属性可以旋转文本中的字符指定角度,先看一段代码实例:

[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;
  font-size:20px;
}
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="20" y="20" rotate="40">钱柜手机网页版</text>
</svg>
</body>
</html>

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

如果只有一个参数,所有文本都旋转同一个角度,如果规定多个参数,那么第一个参数用于第一个字符,第二个参数用于第二个字符,以此类推,代码实例如下:

[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;
  font-size:20px;
}
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="20" y="20" rotate="0 45 90">钱柜手机网页版</text>
</svg>
</body>
</html>

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-19 13:41 , Processed in 0.092678 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部