Text 基本属性
定位 x、y， 颜色 fill， 描边 stroke，字号 font-size，粗细 font-weight，字体 font-family,，字体样式 font-style， 文本修饰 font-decoration,，间距 word-spacing、letter-spacing
(x,y)用于指定文字起始位置，准确的说，x指定文字baseline所处x轴位置，默认最左侧坐标位置，y指定文字baseline所处y轴位置。fill的默认为black。stroke默认为none，如果设置了stroke，字的边缘会再“描一层边”；如果设置了stroke并将fill设为none，呈现为空心字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Draw Arc</title>
<style media="screen">
.svgs{display: flex; flex-flow:row wrap; justify-content: space-around; width: 620px; margin: 0 auto;}
.svgs svg{width:300px; height:200px; background: #F2F2F2; margin-bottom: 10px;}
</style>
</head>
<body>
<div class="svgs">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
<text x="0" y="14" >love life</text>
<text x="0" y="30" fill="#e1cbff" >love life</text>
<text x="0" y="46" fill="#e1cbff" stroke="black" >love life</text>
<text x="0" y="70" fill="#e1cbff" stroke="black" font-size="28" >love life</text>
<text x="0" y="94" fill="#e1cbff" stroke="black" font-size="28" font-weight="600">love life</text>
<text x="0" y="116" fill="#e1cbff" stroke="black" font-size="28" font-weight="600" font-family="Times New Roman">love life</text>
<text x="0" y="138" fill="#e1cbff" stroke="black" font-size="28" font-weight="600" font-family="Times New Roman" font-style="italic">love life</text>
<text x="0" y="166" fill="black" stroke="black" font-size="28" font-weight="600" font-family="Times New Roman" font-style="italic" text-decoration="underline">love life</text>
<text x="0" y="194" fill="none" stroke="#e1cbff" font-size="28" font-weight="600" font-family="Times New Roman" font-style="italic" letter-spacing="2">love life</text>
</svg>
</div>
</body>
</html>
旋转 transform
<text x="50" y="24" font-size="28" font-family="Times New Roman" fill="black" transform="rotate(45)">love life</text>
对齐居中
默认 从起始位置(x,y)开始展示。但由于在svg中无法事先知道 的长度，所以无法仅通过改变(x,y)让 的中轴或结束位置位于指定位置。
但svg提供了一种更简单直接的方法实现这些对齐方式。
text-anchor属性可以改变(x,y)作为起始坐标的定义。
text-anchor="start"时，(x,y)为 的起始坐标。
text-anchor="middle"时，(x,y)为 的中轴坐标。
text-anchor="end"时，(x,y)为 的结束坐标。
<svg>
<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
<text x="150" y="30" font-size="28" font-family="Times New Roman" style="text-anchor: start">love life</text>
<text x="150" y="60" font-size="28" font-family="Times New Roman" style="text-anchor: middle">love life</text>
<text x="150" y="90" font-size="28" font-family="Times New Roman" style="text-anchor: end">love life</text>
</svg>
text长度、字符间隔
默认情况下无从获得 的长度，但可以通过textlength属性设置 长度。 内部字符会根据textLength自适应变化。通过lengthAdjust属性来设置字符变化规则。
lengthAdjust有两个可选属性值。
- spacing
- spacingAndGlyphs
spacing只调整字符之间的间隔；spacingAndGlyphs则会根据一定比例同时调整字符之间的间隔，以及字符本身宽度。
<svg>
<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
<text x="0" y="30" textLength="150" lengthAdjust="spacing">love life</text>
<text x="0" y="60" textLength="150" lengthAdjust="spacingAndGlyphs">love life</text>
<text x="0" y="90">love life
<tspan style="font-size: 10;">(normal length)</tspan>
</text>
<text x="0" y="120" textLength="60" lengthAdjust="spacing">Two words</text>
<text x="0" y="160" textLength="60" lengthAdjust="spacingAndGlyphs">Two words</text>
</svg>
垂直text
有两种方法实现垂直显示text。一种使用transform，一种是text特有的writing-mode：tb(top to bottom)样式。
书上用writing-mode + glyph-orientation-vertical的实现方式在chrome上没生效。
个人认为使用transform（或者writing-mode:tb）+ rotate + letter-spacing实现起来更为灵活。
<svg>
<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
<text x="50" y="20" style="writing-mode: tb;letter-spacing:5px" rotate="-90" >Love life as love you</text>
<text x="70" y="20" transform="rotate(90, 70, 20)" style="letter-spacing:5px" rotate="-90" >Love life as love you</text>
</svg>
tspan 让部分文字有不同样式
textPath 沿路径绘制文本
内嵌于defs中的元素，通过xlink:href属性指向一个 元素，可以将其内部字符的baseline设置成指定的path。
<defs>
<path id="circle" d="M70 20a40 40 0 1 1 -1 0"></path>
</defs>
<text>
<textPath xlink:href="#circle">
Text following a circle.............
</textPath>
</text>
超出 长度部分的文字将被隐藏。
转载出处: svg中text标签字体、颜色、样式、大小、居中、旋转、垂直、text长度、tspan、textPath详解-CSDN博客
