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
