HTML5之SVG 2D入门3—文本与图像及渲染文本介绍


Posted in HTML / CSS onJanuary 30, 2013

SVG中渲染文本

SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单地将它切断。多数情况下,创建多行文本需要多个文本元素。
此外,可以使用 tspan 元素可以将文本元素分成几部分,允许每部分有各自的样式。

还有,在text元素中,空格的处理与HTML类似:换行和回车变成空格,而多个空格压缩成单个空格。

直接显示在图片中的文本 - text元素
直接显示文本,可以使用text元素,例子如下:

复制代码
代码如下:

<svg>
<rect width="300" height="200" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

如上面的例子中所示,text元素可以设置下列的属性: x,y是文本位置坐标。text-anchor是文本显示的方向,其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。start表示文本位置坐标(x,y)位于文本的开始处,文本从这点开始向右挨个显示。middle表示(x,y)位于文本中间处,文本向左右两个方向显示,其实就是居中显示。end表示(x,y)点位于文本结尾,文本向左挨个显示。

除了这些属性,下面的这些属性都既可以在CSS中指定,也可以直接在属性中指定:

fill,stroke:填充和描边颜色,具体使用在后面总结。font的相关属性:font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。

文本区间 - tspan元素
这个元素是text元素的强力补充;它用于渲染一个区间内的文本;它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。例如:

复制代码
代码如下:

<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

tspan元素有下列的属性可以设置:x,y用于设置包含的文本的绝对坐标值,这个值会覆盖默认的文本位置。这些属性可以包含一系列数字,这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。例如:
复制代码
代码如下:

<text x="10" y="10">Hello World!
<tspan x="100 200 300" font-weight="bold" fill="red">This is bold and red</tspan>
</text>

dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字,每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。你可以把上面的例子中的x换成dx看看效果。rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字,应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。 
复制代码
代码如下:

<text x="10" y="10">Hello World!
<tspan rotate="10 20 45" font-weight="bold" fill="red">This is bold and red</tspan>
</text>

textLength:这是最令人费解的属性,据说设置完以后,渲染发现文本的长度与这个值不一致时,会以这个长度为准。但是我没有试出来效果。

文本引用 - tref元素
这个元素允许引用定义过的文本,并高效的拷贝到当前位置,通常配合xlink:href指定目的元素。因为是拷贝过来的,所以使用css修改当前文本的时候,不会修改原来的文本。看例子:

复制代码
代码如下:

<text id="example">This is an example text.</text>
<text>
<tref xlink:href="#example" />
</text>
 
文本路径 - textPath元素
这个比较有意思,效果也很酷,能做出很多的艺术效果;这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上,看例子:
复制代码
代码如下:

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
<textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

SVG中渲染图片 - image元素
SVG中的image元素可以直接支持显示光栅图片,使用很简单。看下面的例子:
复制代码
代码如下:

<svg width="5cm" height="4cm">
<image xlink:href="Penguins.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

这里需要注意几点
1.如果没有设置x或y坐标,则默认是0。

2.如果没有设置width或height,则默认也是0.

3.如果显式的设置width或height为0,则会禁止渲染这幅图片。

4.图片的格式支持png,jpeg,jpg,svg等等,所以svg是支持嵌套svg的。 

5.image与其他元素一样,是svg的常规元素,所以它支持所有的裁剪,蒙板,滤镜,旋转等效果。

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

HTML / CSS 相关文章推荐
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 #HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 #HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 #HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 #HTML / CSS
You might like
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
国培教师自我鉴定
2014/02/12 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
心理学专业求职信
2014/06/16 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
法人代表资格证明书
2015/06/18 职场文书
大学班长竞选稿
2015/11/20 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android