首页 > 上网技巧 > 电脑小技巧 > 正文

SVG基本图形图表之文字text应用教程

时间:2014-07-20 08:50 作者:QQ地带 我要评论

要在 SVG 中画出文字的话,只要使用 <text> 标签就可以了。
 
检视原始码 HTML
<?xml version="1.0" encoding="gb2312"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<text x="10" y="20" style="fill:green;font-size:24px;font-weight:bold;">QQ地带 www.oicqzone.com</text>
 
</svg>
可以把基本会的 css 设定加到元素中,像是笔者在这边指定了文字大小及粗体的效果:
 
 
 
text 还能搭配 textPath 标籤来跟 path 进行关联,来產生文字输出时的路径变化:
 
检视原始码 HTML
 
<<?xml version="1.0" encoding="gb2312"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path id="mypath" d="M50 100Q350 50 350 250T450 250" style="fill:none;stroke:red;stroke-width:5;" />
 
<text x="10" y="20" style="fill:green;font-size:32px;">
<textPath xlink:href="#mypath">QQ地带 http://www.oicqzone.com/</textPath>
</text>
</svg>
 
效果:
 
笔者将 text 的属性整理成一个简单的表格:
 
text  属性
属性 名称 属性说明
x 起始点   x 轴的座标
y 起始点   y 轴的座标
dx 座标的   x 轴偏移位置
dy 座标的   y 轴偏移位置
rotate 旋转偏移的角度
textLength 元素的长度,这会影响输出的宽度
transform 文字的变形效果,类似 css 中的 transform

 


标签: svg
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告