三、SVG 文本
来源:互联网 发布:文员基本办公软件 编辑:程序博客网 时间:2024/05/18 08:12
该部分为四个主要部分:
1. <text>和<tspan>标签详解
2. 文本水平垂直居中问题
3. <textpath>让文本在指定路径上排列
4. <a>插入超链接
<text>和<tspan>标签
<text>和<tspan>标签是定义文本的基本标签。
<text>
例子:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="100" y="100" dx="20 40 60 80 100" fill="black" style="font-size:40px;">我是中国人</text> <path d="M100,0 V200 M0,100 H200" stroke="red"/></svg>
效果:
PS:文字并不是完全在左下角位置,而是在一个叫基线(baseline)的位置,所以文字会在哪个位置,还得看该字体的基线(关于基线的定义请自身查阅资料)。
<tspan>
<tspan>标签是用在<text>标签里面的,也可嵌套使用。所有text标签可用的属性,tspan也都可以用。
例子:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="100" y="100" dy="100" fill="black" style="font-size:40px;"> <tspan fill="blue" dy="-20 10">我是</tspan><tspan fill="red">中国人</tspan> </text> <path d="M100,0 V200 M0,100 H200" stroke="red"/></svg>
效果:
注意:
1. 两个标签不支持自动换行。
2. 可以用style属性设置样式(基本支持大部分CSS属性)。
3. 可以通过程序计算dx、dy值来得到各自文字排版(像波浪形或一些函数曲线)。
4. text和tspan标签设置的dx、dy属性是会往下传递的。也就是在没有设置情况下,后面字符会用沿用上一个字符的dx、dy值。
5. 如果tspan设置了dx、dy属性,就会覆盖text标签上的dx、dy值,而不是叠加计算。
文本水平垂直居中
水平排列
text-anchor属性可设置文本水平排列,有三个取值 start | middle | end。
例子:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">我是中国人</text> <text x="200" y="100" text-anchor="middle" fill="black" style="font-size:40px;">我是中国人</text> <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">我是中国人</text> <path d="M200,0 V200 M0,100 H400" stroke="red"/></svg>
效果:
垂直排列
dominant-baseline属性可设置文本垂直排列 。
PS:属性很多,请查看:http://www.w3.org/TR/SVG/text.html#DominantBaselineProperty
例子:
讲师已经将该属性示例演示出来:http://jsbin.com/lekob/5/edit
注意:
可以从效果上看,这个属性还没有真正做到垂直居中。
还有另一个做法,就是算出垂直居中的y值,进而模拟垂直居中效果。
讲师已经将模拟的代码演示出来:http://output.jsbin.com/kemaxe
<textpath>标签
<textpath>可以让文本在指定路径上排列 。
例子:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/> <text style="font-size:20px;"> <textPath xlink:href="#p1">落红不是无情物,一枝红杏出墙来,恰似一江清水向东流。</textPath> </text></svg>
效果:
PS:超出Path的部分,浏览器不进行渲染。
渲染原理
如下图:
1. 浏览器会算出第一个字符的宽度。
2. 结合路径的起点得到另一个点。
3. 取得中间的那个点做一条的切线和法线。
4. 然后将该字符放到这个位置上。
5. 将上一个字符最后一个点作为下一个字符的起点。
6. 循环第1步,直到文本渲染完毕。
文本在路径上的偏移
文本在路径上的偏移可以用定位属性 x, y, dx, dy,text-anchor 和 startOffset 属性 。
从上图可得到结论:
1. x/dx/startOffset可以设置字符在路径上的渲染起点。
2. y属性设置是没有任何效果的。
3. dy可设置字符在法线上的偏移。
4. text-anchor是设置文本水平排列效果。
<a>标签
<a>标签可以添加到任意的图形上 。
例子:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <a xlink:title="百度" xlink:href="https://www.baidu.com" target="_blank"> <rect x="50" y ="50" width="200" height="200" fill="red"/> </a></svg>
参考视频
1. SVG课程(慕课网)
摘自:http://www.cnblogs.com/lovesong/p/5998650.html
- 三、SVG 文本
- HTML5之Svg(三)文本与图像
- SVG文本
- svg 文本换行
- SVG绘制文本
- svg 文本图像
- SVG 文本(text)
- SVG 文本(text)
- svg 创建文本 create text
- svg 动态修改text文本
- svg dom绘制文本
- svg沿路径绘制文本
- svg文本。填充和边框
- SVG 贝塞尔曲线学习三
- 矢量文本图形-SVG专题教程
- SVG动态修改Text的文本
- svg dom沿路径绘制文本
- CSS3 SVG 构建的创意文本GRAPHICS
- ci调用oracle的存储过程
- Php基础知识测试题
- 【mysql】 varchar类型id,取最大值
- Python中正则表达式的理解
- linux下多线程之pthread_detach(pthread_self())
- 三、SVG 文本
- 服务器响应和浏览器请求产生乱码问题详述
- 面向对象中所有的魔术方法和关键字
- jqgrid 动态设置单元格不可编辑
- MySQL去掉字符串两边的双引号
- python---小算法解释
- eclipse项目中 几个经常使用的快捷键。
- 刻意练习,从新手到大师
- TCP和SOCKET的关系