码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-11-26 14:05:28      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:开始   之一   允许   多行   医院   求助   情况   weight   样式   

  SVG中渲染文本

  SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单地将它切断。多数情况下,创建多行文本需要多个文本元素。鞍山治白癜风最好的医院www.pf0412.cn

  此外,可以使用 tspan 元素可以将文本元素分成几部分,允许每部分有各自的样式。

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

  直接显示在图片中的文本 - text元素

  如上面的例子中所示,text元素可以设置下列的属性:

  x,y是文本位置坐标。text-anchor是文本显示的方向,其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。start表示文本位置坐标(x,y)位于文本的开始处,文本从这点开始向右挨个显示。middle表示(x,y)位于文本中间处,文本向左右两个方向显示,其实就是居中显示。end表示(x,y)点位于文本结尾,文本向左挨个显示。鞍山皮肤病医院www.pf0412.cn

  除了这些属性,下面的这些属性都既可以在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元素的子元素中。典型的用法就是强调显示部分文本。

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

标签:开始   之一   允许   多行   医院   求助   情况   weight   样式   

原文地址:http://www.cnblogs.com/asds/p/7898621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!