SVG-文本,填充和边框

SVG文本

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

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

EM框

Ascent

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

Descent

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

Baseline table

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

image.png

text

greentea
greentea
//单个偏移,单个旋转

//textLength文本长度. lengthAdjust是否整体铺开

tspan

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

greetea gqc

textPath

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

http://www.guoqianchen.com

填充和边框

上色

fill和stroke

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

描边

stroke-width

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

stroke-linecap

控制边框终点的形状

image.png

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

stroke-linejoin

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

image.png

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

stroke-dasharray

将虚线类型应用在描边上

    //一个数代表一个虚线的长度,将会循环下去

必须用逗号分隔

image.png

以上属性可以使用CSS