• 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>

    以上所示

    【汉字编码与中文显示】

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

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

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

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

  • 相关阅读:
    [No000037]操作系统Operating Systems操作系统历史与硬件概况History of OS & Summaries!
    [No000036]操作系统Operating Systems系统调用的实现System_Call
    [No000035]操作系统Operating System之OS Interface操作系统接口
    [No000034]知乎-长期接收碎片化知识有什么弊端?
    [No000033]码农网-如何锻炼出最牛程序员的编码套路
    [No000032]程序员的年龄天花板
    [No000031]操作系统 Operating Systems 之Open the OS!
    [No000030]程序员节发点别的:中国教育整个把人脑子搞坏了-易中天
    [No00002F]3步,教你如何分解需求
    [No00002E]关于大数据,你不知道的6个迷思
  • 原文地址:https://www.cnblogs.com/cacti/p/4708577.html
Copyright © 2020-2023  润新知