您现在的位置是：网站首页> 编程资料编程资料

HTML5之SVG 2D入门3—文本与图像及渲染文本介绍HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题HTML5组件Canvas实现图像灰度化(步骤+实例效果)Html5实现如何在两个div元素之间拖放图像HTML5 用动画的表现形式装载图像

2023-10-15 434人已围观

简介 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件,尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行,接下来介绍SVG中渲染文本,感兴趣的朋友可以了解下，或许有所帮助

SVG中渲染文本

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

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

直接显示在图片中的文本 - text元素
直接显示文本，可以使用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元素的子元素中。典型的用法就是强调显示部分文本。例如：

复制代码
代码如下:


This is bold and red


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

复制代码
代码如下:

Hello World!
This is bold and red


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

复制代码
代码如下:

Hello World!
This is bold and red


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

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

复制代码
代码如下:

This is an example text.



 
文本路径 - textPath元素
这个比较有意思，效果也很酷，能做出很多的艺术效果；这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上，看例子：

复制代码
代码如下:



This text follows a curve.


SVG中渲染图片 - image元素
SVG中的image元素可以直接支持显示光栅图片，使用很简单。看下面的例子：

复制代码
代码如下:





这里需要注意几点：
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/

上一篇：HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用HTML5有哪些新特征JavaScript实用绘制和动画SVG描边路径插件segment源码手把手教你用AI绘制漂亮的svg圣诞图标HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色HTML5新特性之用SVG绘制微信logo

下一篇：HTML5之SVG 2D入门8—文档结构及相关元素总结HTML5的文档结构和新增标签完全解析HTML5文档结构标签如何在Dreamweaver cs6 中设置默认文档格式为html5html5 跨文档消息传输示例探讨HTML5 与 XHTML2详解HTML编程的标记与文档结构在HTML文档中嵌入CSS的三种常用方式html文档中的 ol 元素的序号数字极限探讨HTML文档类型详解 推荐CSS入门:XHTML文档结构树

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网