【文字:<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 >Fly text with my heart , Miss you...</textPath>
</text>
</svg>

以上所示

【汉字编码与中文显示】

中文要在SVG中正确显示,需要保证两个最基本的条件:

1、SVG文件使用UTF-8编码,而不是GB2312编码或者一些不支持汉字的编码或者一些不支持汉字的编码。

2、必须设置字体为中文字体

 

【声音:<a:audio>元素】

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-08-10
  • 2022-12-23
  • 2021-08-20
  • 2022-01-15
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-06-15
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案