毫无疑问，文本也是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. Swagger中配置了@ApiModelProperty的allowableValues属性但不显示的问题

    现在用Swagger来生成API文档的例子已经非常多了,今天碰到开发同事问了一个问题,帮着看了一下,主要还是配置方法的问题,所以记录一下.如果您也碰到了同样的问题,希望本文对您有用. 问题描述 @Ap ...

  2. Scrapy爬虫（5）爬取当当网图书畅销榜

      本次将会使用Scrapy来爬取当当网的图书畅销榜,其网页截图如下:   我们的爬虫将会把每本书的排名,书名,作者,出版社,价格以及评论数爬取出来,并保存为csv格式的文件.项目的具体创建就不再多讲 ...

  3. C# Parallel用法

    1.Parallel.Invoke 主要用于任务的并行 这个函数的功能和Task有些相似,就是并发执行一系列任务,然后等待所有完成.和Task比起来,省略了Task.WaitAll这一步,自然也缺少了 ...

  4. [PHP]算法-队列结构的PHP实现

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 1.php数组完全就能实现 2.array_push 从尾部往里压入元素 3.array_shi ...

  5. 15.QT-Valgrind内存分析

    QT检测内存泄漏 在Linux  Qt Creator里,有个Valgrind内存分析器,它用来检测应用程序是否发生内存泄漏 安装: sudo apt-get install valgrind 如何使 ...

  6. 5.QT-QString类

    Qt中的字符串类 介绍 采用Unicode编码  采用隐式共享技术,节省内存和不必要的数据拷贝 隐式共享介于浅拷贝和深拷贝之间,当两个string对象赋值时,会实现浅拷贝(共享一块内存),如果某个对象 ...

  7. C语言异常处理之 setjmp()和longjmp()

    异常处理之除0情况 相信大家处理除0时,都会通过函数,然后判断除数是否为0,代码如下所示: double divide(doublea,double b) { const double delta = ...

  8. 蓝桥杯试题----- 打印大X

    打印大X 小明希望用星号拼凑,打印出一个大X,他要求能够控制笔画的宽度和整个字的高度.为了便于比对空格,所有的空白位置都以句点符来代替. 要求输入两个整数m n,表示笔的宽度,X的高度.用空格分开(0 ...

  9. json字符串和json对象的相互转化

    开发经常要用到json字符串和json对象的相互转化,这里总结常用的两个函数.JSON.parse('字符串'),JSON.stringify('json对象') <script type=&q ...

  10. css选择器优选级及匹配原理（转）

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...