HTML5之SVG 2D入门3 - 文本与图像

转载 2016年08月30日 11:39:52

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>

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/

转自:http://www.cnblogs.com/dxy1982/archive/2012/04/09/2395728.html

相关文章推荐

HTML5/CSS3系列教程:使用SVG图片

日期:2013-3-25  来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG。 SVG全称是Scalable Vector Graphi...
  • jjfat
  • jjfat
  • 2013年03月26日 13:30
  • 802

HTML5之SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用。 组合 - g元素 g元素是一种容器,它组合一...

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

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

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果,喜欢特效的朋友可不要错过哦。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧,希望本文对你有所帮助。 ...

HTML5之SVG 2D入门11 - 动画

交互性 SVG拥有良好的用户交互性,例如: SVG能响应大部分的DOM2事件。 SVG能通过cursor良好的捕捉用户鼠标的移动。 用户可以很方便的通过设置svg元素的zoomAndPan属性的值...

HTML5之SVG 2D入门6 - 坐标与变换

坐标系统   SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示: SVG的视窗位置...

HTML5之SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。SVG文档的元素基本可以分为以下几类:•动画元素:ani...

HTML5之SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用。 组合 - g元素g元素是一种容器,它组合一组相关的图形元...

HTML5之SVG 2D入门8—文档结构及相关元素总结

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里主要是对SVG的文档结构中剩下的相关元素简单总结一下,感兴趣的朋友可不要错过哦,然后继续向前领略SVG的其他特性。 前面介绍了很多的基本元...

HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用

SVG拥有良好的用户交互性:SVG能响应大部分的DOM2事件,SVG能通过cursor良好的捕捉用户鼠标的移动等等,感兴趣的朋友可以了解下啊,或许本文对你学习动画有所帮助。 交互性  SVG拥有良...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5之SVG 2D入门3 - 文本与图像
举报原因:
原因补充:

(最多只允许输入30个字)