矢量文本图形-SVG专题教程 文字(1)
文 字(1)
1. 文字居左对齐
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="50" height="50"＞
＜text x="0" y="20" style="fill: red"＞
SVG
＜/text＞
＜/svg＞
讲解:
在SVG中使用＜text＞＜/text＞标签定义文字.
x,y属性决定文字的位置.＜text＞默认为文字居左对齐.也就是文字的轴线在文字的最左边线,图中,取轴线为x=0,与画布的最左边线一致,我们看到文字居左对齐.
(另:关于中文字体以及编码格式,我们将在以后的专题中再做讨论.目前范例仍然使用默认的英文字体.)
2. 文字居中对齐
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="50" height="50"＞
＜text x="50" y="13" style="fill: red; text-anchor: middle"＞
SVG
＜/text＞
＜/svg＞
讲解:
居中对齐也就是文字的轴线在文字的中心.图中取x=50为轴线,我们很清楚的看到,轴线落在文字的中心.(另半边由于落在图像画布外,所以没有显示.)
居中对齐使用了text-anchor: middle这一属性.
3. 文字居右对齐
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="50" height="50"＞
＜text x="50" y="13" style="fill: red; text-anchor: end"＞
SVG
＜/text＞
＜/svg＞
讲解:
居右对齐也就是文字的轴线在文字的最右边线.图中取x=50为轴线,与画布的最右边线一致.我们很清楚的看到,轴线落在文字的最右边.
居中对齐使用了text-anchor: end这一属性.