SVG实战开发学习(七)——文字与声音

【文字:<text>元素】

基本属性

x:文字左下角的X坐标,默认测量单位是当前用户坐标系单位,默认值是0.

y:文字左下角的Y坐标.

【<text>中嵌套<tspan>元素】

通过该元素就可以对同一个<text>元素内的文字位置、样式等属性进行单独或者部分设置,而不用再增加<text>元素。

基本属性:

x:逐个定义文字左下角的X绝对坐标。"+"号表示这是一个列表值(下同),列表值可以用逗号或者空格进行分割。如果是列表值则表示是每一个该元素内的文字的X坐标。如果定义的坐标值数量大于元素内的文字数量,多余的坐标值无效;反之,如果文字数量大于坐标值数量,则剩余文字的位置由父元素<text>定义的坐标值来确定。

y:逐个定义左下角的Y绝对坐标,含义同上述的X属性。

dx:逐个定义文字左下角的X相对坐标,相对于前一个字符的X坐标,默认值为0,如果是列表值,则分别定义了每一个该元素内的文字的X轴上的增量值。如果是第一个字符,那么就参照<text>元素定义的文字位置。

dy:文字左下角的Y相对坐标,含义同上述的的dx属性。

rotate:逐个定义以文字左下角为圆心进行的整体逆时针旋转的角度,默认值为0,也就是文字不旋转。如果是列表值,则分别定义了每一个该元素内的文字的旋转角度。

实例代码如下:

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" style="font-size:20">
<tspan style="font-size:30">W</tspan>
<tspan dx="5,5,5,5,5,5" dy="-5,-5,-5,-5,-5,-5">elcome</tspan>
<tspan x="230" y="80" dy="5,5,5,5,5,5">to SVG</tspan>
<tspan x="300" y="80"> world!</tspan>
</text>
</svg>

【文字效果】

1、文字装饰——text-decoration属性

文字装饰是通过设置text-decoration属性的值来实现的,该属性的参数值有:删除线"line-through"、下划线"underline"、上划线" overline "、闪烁"blink"。

2、文字彩色描边

该效果并没有使用特殊的属性,认识通过组合使用先前我们都已经熟悉的" stroke "、"stroke-width"来实现的。

如下实例:

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" style="font-size:86" fill="red" stroke="black" stroke-width="4">
SVG
</text>
</svg>

3、文字阴影

在SVG中,实现文字的阴影效果有两种办法,一种是采用滤镜的方法,这个方法将在第11章中介绍,另外一种方法就是采用下文的方法,使用两个<text>元素的错落叠加"曲线"来实现。

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" style="font-size:86" fill="red" stroke="black" stroke-width="1">
shadow
</text>
<text x="109" y="109" style="font-size:86" fill="red" stroke="yellow" stroke-width="1">
shadow
</text>
</svg>

4、文字透明

使用<text>元素中的"opacity"属性可以设置文字的透明效果,取值从0~1,代表着从透明(0%)到不透明( 100% ).

5、沿着路径变化的文字

SVG中提供了<textPath>元素来产生文字沿着某条事先定义好的曲线路径排列的效果。

见如下实例:

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="pathPreDef"
d="M 151 202 C 152.1667 195.3333 151.1667 171.8333 158 162 C 164.8333 152.1667 177.3333 145 192 143 C 206.6667 141 234.3333 139.8333 246 150 C 257.6667 160.1667 257.1667 185.3333 262 204 C 266.8333 222.6667 263.1667 246.1667 275 262 C 286.8333 277.8333 316.5 295.6667 333 299 C 349.5 302.3333 364.6667 292.6667 374 282 C 383.3333 271.3333 386.5 242.8333 389 235 "/>
</defs>
<text x="100" y="100" fill="blue"
stroke="blue" stroke-width="2"
font-size="24">
<textPath xlink:href="#pathPreDef">Fly text with my heart , Miss you...</textPath>
</text>
</svg>

以上所示

时间: 2024-10-14 04:42:05

SVG实战开发学习(七)——文字与声音的相关文章

SVG实战开发学习(五)——装饰SVG图形

之前介绍过<defs>元素,它允许我们自定义图形元素.在本章中将要使用这个元素来定义SVG图形的色彩渐变.模式填充.剪裁和遮罩,还将介绍如何在svg中使用css样式表. [色彩渐变] svg中有两种色彩渐变:线性渐变和反射渐变.它们的渐变格式都被定义在<defs>元素中,然后在需要的SVG图元中引用它. 线性渐变——是沿着直线方向的色彩渐变过度,使用<linearGradient>元素来定义. 基本属性: id="GradientName":<

SVG实战开发学习(二)——基本图形

[1]线段:<line>元素 基本属性:两点确定一条线段,所以线段的基本属性就是它的起止点的坐标. <svg width="300" height="400"> <!--水平线--> <line x1="20" y1="20" x2="70" y2="20"  style="stroke:black"  /> <!

SVG实战开发学习(三)——路径

[三种基本的绘图指令] 1.移动到当前点( MoveTo )和绘制直线(LineTo) <path d=" M269 112, L217 163, L272 163, M257 149, L299 149, L249 200" fill="#ffffff" stroke="#000000" /> 解析:           指令                     实际绘制动作                    M269 11

初学者福利:java从零基础到真正大型企业的项目实战开发学习资源

乡亲们,快来围观啊,java初学者福利java从零基础到真正大型企业的项目实战开发学习资源合集,不必再花时间网上找了,精彩不容错过,以下是学习内容截图(更多精彩稍后推出,最新课程请加群之后,查看群公告): 下载链接: http://pan.baidu.com/s/1o6E8zhC,下载密码请加QQ群435604457.加群验证:java

JFinal Web开发学习(七)使用layUI美化的登录功能

效果: 验证码还是没有布局好.背景比较怀古. 1.写前端html login.jsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>

《Spring3.X企业应用开发实战》学习笔记--DAO和事务

本篇是"<Spring3.X企业应用开发实战>,陈雄华 林开雄著,电子工业出版社,2012.2出版"的学习笔记的第二篇,关于DAO和事务. 本篇从DAO操作,以及事务处理的基本知识谈起,介绍事务本身,以及Spring如何通过注解实现事务. DAO 近几年持久化技术领域异常喧嚣,各种框架如雨后春笋般地冒出,Sun也连接不断的颁布了几个持久化规范. Spring对多个持久化技术提供了持久化支持,包括Hibernate,iBatis,JDO,JPA,TopLink,另外,还通过S

MongoDB实战开发 【零基础学习,附完整Asp.net示例】

MongoDB实战开发 [零基础学习,附完整Asp.net示例] 阅读目录 开始 下载MongoDB,并启动它 在C#使用MongoDB 重构(简化)代码 使用MongoDB的客户端查看数据 使用MongoDB的客户端维护数据 MongoDB提供的C#驱动 MongoDB不支持在查询数据库时使用Join操作 获取MongoDB服务端状态 [目标]:本文将以实战的形式,向您展示如何用C#访问MongoDB,完成常见的数据库操作任务, 同时,也将介绍MongoDB的客户端(命令行工作模式)以及一些基

ym——android源码大放送(实战开发必备)

文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │ ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMobileDemo1_1-master.zip │      Location1014.rar │ ├─anko │      

CSS3实战开发:百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有