SVG文本

字符、字体、字形和EM框

卸载图像中的文本

其他文本标签

字符（Characters）

要展示的字母的数字表示形式，每个字符都由特定的Unicode定义

字形（Glyphs）

字符的可视化表示形式

字体(Fonts)

字形的集合

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

EM框

三种字体特征
Ascent：
从字体的(0,0)点到EM box顶部的距离
Descent：
从字体的(0,0)点到EM box底部的距离
Baseline table：
设计空间坐标系统中的基线的位置

text元素
基础
在一个SVG文档中，<text>元素内部可以放任何的文字。
Coding
<text>www.imooc.com</text>
设置字体属性
font-family、font-style、font-weight、font-variant、font-stretch、font-size、
font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration

例子：

文本的位置
x和y属性
设置在视图中展示文本的位置。
Coding
<text x="x" y="y">www.imooc.com</text>
说明
x为正值，会将文本移动到右边，y为正值会将它向下移

例子：

x="0" y="0"
<svg width="200" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="0">http://www.imooc.com</text>
</svg>

x="x1 x2 x3 x4 x5 … xn" y="y1 y2 y3 y4 y5 … yn"
<svg width="200" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0 20 40 60 80 100" y="0 10 20 30 40 50">www.imooc.com</text>
</svg>

文本的偏移
dx="dx" dy="dy"
<svg width="400" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="0" dx="10" dy="10">http://www.imooc.com</text>
</svg>

dx="x1 x2 x3 x4 x5 … xn" dy="y1 y2 y3 y4 y5 … yn"
<svg width="400" height="50" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="0 10 20 30" dy="0 10 20 30">www.imooc.com</text>
</svg>

文本的旋转
rotate="45"
<svg width="400" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="0" rotate="45">www.imooc.com</text>
</svg>

rotate="deg1 deg2 deg3 deg4 deg5 … degn"
<svg width="400" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="0" rotate="0 45 90 135 180">www.imooc.com</text>
</svg>

transform="rotate(45)"
<svg width="400" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="0" transform="rotate(30)">www.imooc.com</text>
</svg>

文本的长度
textLength="widthValue"
<svg width="400" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="25" textLength="200">www.imooc.com</text>
</svg>

文本的宽度
lengthAdjust="spacingAndGlyphs"
<svg width="400" height="50" style="outline: 1px solid red; overflow:
visible;">
<text x="0" y="25" textLength="400"
lengthAdjust="spacingAndGlyphs">www.imooc.com</text>
</svg>

lengthAdjust="spacing"为默认值

tspan元素
<tspan>元素
用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。
Coding
<text>www.<tspan fill="red">imooc</tspan>.com</text>

textPath元素
<textPath>元素
利用xlink:href属性把字符对齐到路径，让字体环绕路径、顺着路径走。
Coding
<path id="path" d="M 10,10 Q 150,80 290,10" stroke="red" fill="transparent" />
<text><textPath xlink:href="#path">http://www.imooc.com</textPath></text>

文本水平居中text-anchor="middle"

文本垂直居中 dominant-baseline="middle"

填充和边框

上色
描边
使用CSS

上色
填充和边框
fill属性和stroke属性。fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。
Coding
<rect fill="color" stroke="color" fill-opacity="opacity" stroke-
opacity="opacity" />

属性说明
使用CSS颜色命名方案定义颜色，比如说颜色名、rgb、 rgba、十六进制等等。
属性fill-opacity控制填充色的不透明度，属性stroke-opacity控制描边的不透明度。

描边
stroke-width属性
stroke-width属性定义了描边的宽度。
Coding
<rect stroke-width="widthValue" />
属性说明
描边是以路径为中心线绘制的。

stroke-linecap属性
stroke-linecap属性控制边框终点的形状。
Coding
<rect stroke-linecap="butt/square/round" />
属性说明
butt：用直边结束线段，常规做法，线段边界90度垂直于描边方向、贯穿描边终点。
square：稍微超出实际路径范围，超出大小由stroke-width控制。
round：表示边框终点是圆角，圆角半径由stroke-width控制的。

stroke-linejoin属性
stroke-linejoin用来控制两条描边线段之间的链接方式。
Coding
<rect stroke-linejoin="miter/bevel/round" />

miter：默认值，用方形画笔在连接处形成尖角。
bevel：连接处会形成一个斜接。
round：用圆角连接，实现平滑效果。

stroke-dasharray属性
stroke-dasharray属性将虚线类型应用在描边上。
Coding
<rect stroke-dasharray="n1, n2, n3, n4, … , nn" />
属性说明
一组用逗号分割的数字组成的数列，这里的数字必须用逗号分割（空格会被忽略）。
每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。
更复杂的虚线模式，可以定义更多的数字。

使用CSS
使用style标签
<style type="text/css">
rect { stroke: color; fill: color; }
</style>
外链CSS
<?xml-stylesheet type="text/css" href="style.css"?>

posted @ 2018-11-27 16:21 键1234 阅读(540) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

键1234

SVG文本

公告