SVG文本

• 字符 要展示的字幕的数字表现形式,每个字符都由特定的unicode定义
• 字形 字符的可视化表现形式
• 字体 字形的集合

字形和字体表被称为字体数据

EM框

Ascent

从字体的(0,0)到EM box顶部的距离

Descent

从字体的(0,0)到EM box底部的距离

Baseline table

设计空间坐标系统中的基线的位置

image.png

text

<text>greentea</text>
<text font-size="12px" x="10 10" y="10 10" dx="10" dy="10" rotate="45">greentea</text>
//单个偏移,单个旋转
<svg width="400" height="50">
    <text x="0" y="25" textLength="400" lengthAdjust="spacingAndGlyphs"></text>
</svg>
//textLength文本长度. lengthAdjust是否整体铺开

tspan

用来标记大块文本的子部分,它必须是一个text元素

<text>greetea <tspan fill="red">gqc</tspan></text>

textPath

利用xlink:here属性把字符对齐到路径,让字体环绕路径,顺着路径走

<path id="path" d="M 10,10 Q 150,80 290,10" stroke="red" fill="transparent"></path>
<text><textPath xlink:href="#path">http://www.guoqianchen.com</textPath></text>

填充和边框

上色

fill和stroke

fill属性和stroke属性.fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色.

<rect fill="color" stroke="color" fill-opacity="fill-opacity" stroke-opacity="opacity"/>

描边

stroke-width

描边的宽度,以路径为中心绘制,各发散,而不是总和

stroke-linecap

控制边框终点的形状

<rect stroke-linecap="butt/square/round"/>      

image.png

butt:直接结束
square:超出实际范围,有stroke-width控制
round:圆形

stroke-linejoin

控制描边线段直接的连接方式

<rect stroke-linejoin="miter/bevel/round"/>

image.png

miter:尖角(默认值)
bevel:切边
round:圆角

stroke-dasharray

将虚线类型应用在描边上

<rect stroke-dasharray="n1,n2,n3,n4,...nn"/>    //一个数代表一个虚线的长度,将会循环下去

必须用逗号分隔

image.png

以上属性可以使用CSS