SVG 2D入门3 - 文本与图像
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的常规元素,所以它支持所有的裁剪,蒙板,滤镜,旋转等效果。
SVG 2D入门3 - 文本与图像的更多相关文章
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- SVG 2D入门8 - 文档结构
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- SVG 2D入门1 - SVG综述
位图与矢量图 以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...
- SVG 2D入门11 - 动画
交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomA ...
- SVG 2D入门10 - 滤镜
滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好. ...
- SVG 2D入门4 - 笔画与填充
前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果:你会发现这里的内容与canvas基本上是一致的.这些属性既可以以属性的形式写在 ...
- SVG 2D入门12 - SVG DOM
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...
- SVG 2D入门9 - 蒙板
SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果.至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧. ...
随机推荐
- 解决 placeholder 垂直不居中,偏上的问题
解决 placeholder 垂直不居中,偏上的问题 安卓浏览器显示placeholder 垂直不居中,而iphone没问题,搜了一下答案,解决方法是把input的line-height去掉就行 参考 ...
- 鼠标经过容器放大--css3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Linux基础: 挂载镜像文件(Mount & ISO)
ISO/Ghost 镜像文件概念(裸机安装,无光驱安装,跨平台安装) ISO是镜像文件:所谓镜像文件其实和ZIP压缩包类似,它将特定的一系列文件按照一定的格式制作成单一的文件,以方便用户下载和使用,例 ...
- hdu 3908 Triple(组合计数、容斥原理)
Triple Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 125536/65536 K (Java/Others) Total Su ...
- javascript中IE与ff的区别
1.自定义属性问题:可以使用获取常规属性的方法来获取自定义属性,也可以使用getAtribute()获取自定义属性,ff下只能使用getAttribute()获取自定义属性. 2. 在IE中可以用ev ...
- 5月18日 HTML 个人简历
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jdk版本比较
JDK各个版本的新特性 对于很多刚接触java语言的初学者来说,要了解一门语言,最好的方式就是要能从基础的版本进行了解,升级的过程,以及升级的新特性,这样才能循序渐进的学好一门语言.今天先为大家介绍一 ...
- python的一点小常识
在Python中,有两种变长参数,分别是元组(非关键字参数)和字典(关键字参数),其参数以一个*开头表示任意长度的元组[tuple],可以接收连续一串参数,参数以两个*开头表示一个字典[dict],即 ...
- 服务器后端开发系列——《实战Memcached内存缓存系统》
1.实战Memcached缓存系统(1)Memcached基础及示例程序 内容:建筑Memcached背景知识和入门示例程序. 2.实战Memcached缓存系统(2)Memcached Java A ...
- php像新浪微博一样生成短域名
<?php function shorturl($url='', $prefix='', $suffix='') { $base32 = array ( 'a', 'b', 'c', 'd', ...