毫无疑问，文本也是svg中组成的重要部分，在svg中，用<text>元素来创建文本，文本的使用格式如下：

<text x="20" y="30" style="font-family:'微软雅黑'; font-size:25px;">这是一个text元素</text>

其中的x和y属性默认情况下是第一个字符左下角的位置坐标，style中可以是CSS的文字相关属性，比如：font-family，font-size，font-weight，font-style，text-decoration，word-spacing，letter-spacing等，示例如下：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <path d="M 10,30 L 250,30" stroke="black"></path>

        <path d="M 20,10 L 20,150" stroke="black"></path>

        <text x="20" y="30" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text>

</body>

</html>

效果如下：

我们大多数的时候可能并不仅仅想让文本左对齐，而是居中对齐或者是右对齐，<text>元素的text-anchor属性来指定文本的对齐方式，取值有start，middle，end三种，分别对应左对齐，中间对齐，右对齐。当设置text-anchor属性的值为start时（默认），<text>元素的x和y属性表示最左边文字左下角的坐标；设置为middle时，<text>元素的x和y属性表示中间文字中间位置下边的坐标；设置为end时，<text>元素的x和y属性表示最右边文字右下角的坐标：示例如下：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <path d="M 150,10 L 150,200" stroke="black"></path>

        <text x="150" y="60" text-anchor="end" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text>

        <text x="150" y="100" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text>

        <text x="150" y="140" text-anchor="middle" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text>

    </svg>

</body>

</html>

效果如下：

和html中<p>元素和<span>元素类似的是svg中<text>元素还可以嵌套<tspan>元素，<tspan>元素的作用类似于html中的<span>元素，但与<span>元素不同的是，<tspan>元素有x，y，dx，dy，rotate几个属性：示例如下：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="400" height="300" style="border:1px solid #000">

        <text x="20" y="40" stroke="none" fill="black">

            <tspan>网络教育是当今国际国内教育发展的热点，</tspan>

            <tspan x="20" y="65">也是现代教育技术的主流发展方向之一。</tspan>

            <tspan x="20" y="90">在传统的教学中，大多数情况下，知识是老师灌输的，</tspan>

            <tspan x="20" y="115">学生只是被动接收。而在网络教育中，</tspan>

            <tspan x="20" y="140">学习采用互动方式，从某种程度上说，</tspan>

            <tspan x="20" y="165">学生既是一个接收者，也是一个参与教育的主体。</tspan>

            <tspan x="20" y="190">这种交互式的教育，更有助于学生知识的获得、能力的培养，有助于更主动地去思考。</tspan>

        </text>

    </svg>

</body>

</html>

效果：

<text>，<tspan>元素中的文字不会自动换行（现象如上图最后一行）。<tspan>中的x和y属性与<text>元素的x，y属性作用相同，dx和dy属性是相对距离，当<tspan>元素指定dx属性时，相当于将<tspan>元素向左（dx值为负数）或者向右（dx值为正数）偏移一定的距离；指定dy属性时，相当于将<span>元素向上（dy值为负数）或者向下（dy值为正数）偏移一定距离。而rotate就是旋转一定角度了。

示例：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="800" height="180" style="border:1px solid #000">

        <text x="20" y="20" stroke="none" fill="black">

            网络教育是当今国际国内教育发展的热点，也是现代教育技术的主流发展方向之一。在传统的教学中，

            <tspan x="20" y="45" rotate="12 34 45 12 34 56 90 190 349 120 128">

                大多数情况下，知识是老师灌输的，学生只是被动接收。而在网络教育中，学习采用互动方式，

            </tspan>

            <tspan x="20" y="70" dy="1 3 5 6 7 8 2 2 5 2 6 ">

                从某种程度上说，学生既是一个接收者，也是一个参与教育的主体。这种交互式的教育，更有助于学

            </tspan>

            <tspan x="20" y="145"  dx="1 2 4 5 1 3 4 7 9 10">

                生知识的获得、能力的培养，有助于更主动地去思考。

            </tspan>

        </text>

    </svg>

</body>

</html>

效果如下：

第一行是正常情况下的，没有任何属性的，第二行是添加了rotate属性的（值的单位是度），第三行是添加了dy属性的，第四行是添加了dx属性的，这些属性都可以指定多个值，之间用空格和逗号之间隔开，这些值会依次应用在字符上。

有时候我们可能会想让一段文字占用固定的长度，这时候我们可以用textLength属性和textAdjust属性来实现，textLength属性即为文字占用的长度，textAdjust用来指定调整字符大小的方式，指定为spacing（默认值）时是调整字符间空隙的大小，指定为spacingAndGlyphs是调整字符大小和字符间空隙的大小，示例：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="100" style="border:1px solid #000;">

        <text x="10" y="10" stroke="none" textLength="200">

            two words

        </text>

        <text x="10" y="30" stroke="none" textLength="200" lengthAdjust="spacingAndGlyphs">

            two words

        </text>

        <text x="10" y="50" stroke="none" textLength="50">

            two words

        </text>

        <text x="10" y="70" stroke="none" textLength="50" lengthAdjust="spacingAndGlyphs">

            two words

        </text>

    </svg>

</body>

</html>

效果：

这样可能看不清，来张放大的

这就一目了然了吧O(∩_∩)O哈哈~

有时候我们并不想让文字横向排列，我们可能想让文字旋转一定的角度，甚至竖直排列，当然我们可以使用transform的rotate实现，但是让文字竖直排列还有一个方法，就是设置writing-mode属性为tb（top to bottom）,如果想让文本在竖直排列的时候，单个字符仍然横向显示，可以通过设置glyph-orientation-vertical的值为0实现，默认90。示例如下：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <text x="10" y="10" writing-mode="tb">

            这是一段文本文字

        </text>

        <text x="30" y="10" transform="rotate(90 30 10)">

            这是一段文本文字

        </text>

        <text x="70" y="10" writing-mode="tb">

            this is a paragraph

        </text>

        <text x="90" y="10" writing-mode="tb" glyph-orientation-vertical="0" >

            this is a paragraph

        </text>

    </svg>

</body>

</html>

效果如下：

但是最后一个有问题，我已经设置了glyph-orientation-vertical为0，但是字母并没有翻转过来，至于原因，我也不知道为什么╮(╯▽╰)╭╮(╯▽╰)╭

关于国际化的<switch>，用的不多，就不多说了，用的时候查一下就就行了(～￣▽￣)～

我想我不是个乖孩子，从小就不是，我爸妈在我小时候给我定了一堆规矩，不准动这个，不准玩这个，上学了老师说，上课不准睡觉不准吃东西不准大声说话云云~~~但是我从来就没当回事，也就当时听了一下，玩的时候早忘脑后了————————svg中的文本一直就是一条直线，你难道就不想破坏一下这个规矩吗（不知道你想不想，反正我是个从来不遵守规定的人(￣_,￣ )），svg中使用路径来给文本创建轨迹，使用的时候只需要在<text>元素中嵌套子元素<textPath>，并使用<textPath>元素的xlink:href属性引用声明好的路径就行，看示例：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <defs>

            <path id="p1" class="st0" d="M30.6,115.9c22.8-15.2,40.6-10.7,41.1,24.9S0.2,229.6,46.4,261.1s58.4,31,89.3,7.6

            S108.4,226,150,193.5s61.9,71.6,92.8,34.5s54.3-79.7,19.8-111.7s-55.8-53.3-100.5-45.7S98.2,59.5,88,37.2s-69-8.6-69-8.6"/>

        </defs>

        <use xlink:href="#p1" stroke="black" fill="none"></use>

        <text>

            <textPath xlink:href="#p1">

                这是一个测试的字符段，用来测试带有路径的文本,这行字仅仅是用来测试的，看一下就就行了，千万别仔细看，不过你已经看到这了，就看完吧，反正就要结束了

            </textPath>

        </text>

    </svg>

</body>

</html>

效果：

上面个这个图片的代码中的路径是我用Adobe Illustrator生成的，我可不会傻到自己用代码敲这么一个路径出来(⊙ω⊙)

8. svg学习笔记-文本的更多相关文章

  1. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  2. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  3. 1. svg学习笔记-在网页中使用svg

    在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...

  4. svg的基本图形与属性【小尾巴的svg学习笔记1】

    因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...

  5. （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

  6. svg学习笔记（一）

    SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150 ...

  7. svg学习笔记（二）

    SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...

  8. svg学习笔记

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. TensorFlow深度学习笔记 文本与序列的深度模型

    Deep Models for Text and Sequence 转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎st ...

随机推荐

  1. Http协议中get和post的区别

    get(默认值)是通过URL传递表单值,数据追加在action属性后面. post传递的表单值是隐藏到http报文体中,url中看不到. get是通过url传递表单值,post通过url看不到表单域的 ...

  2. Pytorch1.0入门实战二：LeNet、AleNet、VGG、GoogLeNet、ResNet模型详解

    LeNet 1998年,LeCun提出了第一个真正的卷积神经网络,也是整个神经网络的开山之作,称为LeNet,现在主要指的是LeNet5或LeNet-5,如图1.1所示.它的主要特征是将卷积层和下采样 ...

  3. MySQL中间件之ProxySQL(15)：ProxySQL代理MySQL组复制

    返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.ProxySQL+组复制前言 在以前的ProxySQL版本中,要支 ...

  4. SPI 方式初始化 SD 卡总流程图（V2.0）

  5. 玩转Linux服务器常用命令

    查看服务器的一些基本信息: linux基础命令:http://cnblogs.com/mmzs/p/8406208.html Linux某些命令找不到/无法使用:http://www.cnblogs. ...

  6. [转]Illuminate Database

    本文转自:https://github.com/illuminate/database Illuminate Database The Illuminate Database component is ...

  7. linux添加字体

    执行命令发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体库都没有,那么接下来就记录一下在Linux CentOS 7中如何安装字体库以及中文字体. 安装字体库 在Ce ...

  8. C#设计模式之十八状态模式（State Pattern）【行为型】

    一.引言 今天我们开始讲“行为型”设计模式的第六个模式,该模式是[状态模式],英文名称是:State Pattern.无论是现实世界,还是面向对象的OO世界,里面都有一个东西,那就是对象.有对象当然就 ...

  9. Async/Await是这样简化JavaScript代码的

    译者按: 在Async/Await替代Promise的6个理由中,我们比较了两种不同的异步编程方法:Async/Await和Promise,这篇博客将通过示例代码介绍Async/Await是如何简化J ...

  10. C#中try catch finally的执行顺序

    1.首先明确一点,就是不管怎样,finally一定会执行,即使程序有异常,并且在catch中thorw 了 ,finally还是会被执行. 2.当try和catch中有return时,finally仍 ...