8. svg学习笔记-文本
毫无疑问，文本也是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学习笔记-文本的更多相关文章
- 4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- 1. svg学习笔记-在网页中使用svg
在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...
- svg的基本图形与属性【小尾巴的svg学习笔记1】
因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...
- （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
- svg学习笔记（一）
SVG——可扩展适量图形,基于XML PC端:IE9+ wap端:表现良好,适合使用 基础图形: line(线段) <line x1="25" y1="150 ...
- svg学习笔记（二）
SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...
- svg学习笔记
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- TensorFlow深度学习笔记 文本与序列的深度模型
Deep Models for Text and Sequence 转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎st ...
随机推荐
- Python机器学习笔记 使用sklearn做特征工程和数据挖掘
特征处理是特征工程的核心部分,特征工程是数据分析中最耗时间和精力的一部分工作,它不像算法和模型那样式确定的步骤,更多的是工程上的经验和权衡,因此没有统一的方法,但是sklearn提供了较为完整的特征处 ...
- 机器学习中数据清洗&预处理
数据预处理是建立机器学习模型的第一步,对最终结果有决定性的作用:如果你的数据集没有完成数据清洗和预处理,那么你的模型很可能也不会有效 第一步,导入数据 进行学习的第一步,我们需要将数据导入程序以进行下 ...
- Perl数据序列化和持久化(入门)：Storable模块
Perl提供了一个Storable模块,用来对数据结构进行序列化(serialization,Perl中称为冻结),也就是将数据结构保存为二进制数据. 序列化后的数据可以写入文件实现持久化,可以将持久 ...
- HttpClients+Jsoup抓取笔趣阁小说，并保存到本地TXT文件
前言 首先先介绍一下Jsoup:(摘自官网) jsoup is a Java library for working with real-world HTML. It provides a very ...
- Linux命令-基本操作和软件安装
配置JDK环境:JAVA_HOME:D:\software\JDK1.7Path:%JAVA_HOME%\bin;%JAVA_HOME%\lib; ls(查看当前目录下的文件及文件夹)sh initN ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- Easyui input 取值跟赋值
var val = $("#id").textbox('getValue') //取值 $("#id").textbox('setValue','text') ...
- Linux-bg和fg命令(19)
使用ctrl+z将程序挂在后台: jobs 查看后台的命令: fg(fore go) 将后台的命令,放置前台(fore)继续执行,比如:fg 2 //等价于vi 2.txt bg(back g ...
- 3. 原子变量-CAS算法
1. 是什么 ? 2. CAS算法模拟 package com.gf.demo03; public class TestCompareAndSwap { public static void main ...
- 【Java每日一题】20170313
20170310问题解析请点击今日问题下方的“[Java每日一题]20170313”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; import jav ...