本文共 866 字，大约阅读时间需要 2 分钟。
SVG 的强大能力之一是它可以将文本控制到标准 HTML 页面不可能有的程度，而无须求助图像或其它插件（后者会带来可访问性挑战）。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。
一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。 可以使用 tspan 元素将文本元素分成几部分，允许每部分有各自的样式。在 text 元素中，空格的处理与 HTML 类似；换行和回车变成空格，而多个空格压缩成单个空格，如下面的早期示例所示：
<g>
<text x="20" y="50" font-size="30"> Colors can be specified </text> <text x="20" y="100" font-size="30">by their <tspan fill="rgb(255,0,0)">R</tspan> <tspan fill="rgb(0,255,0)">G</tspan> <tspan fill="rgb(0,0,255)">B</tspan> values</text> <text x="20" y="150" font-size="30"> or by keywords such as </text> <text x="20" y="200" font-size="30"> <tspan fill="lightsteelblue">lightsteelblue</tspan>, </text> <text x="20" y="250" font-size="30"> <tspan fill="mediumseagreen">mediumseagreen</tspan>, </text> <text x="20" y="300" font-size="30">and <tspan fill="darkorchid">darkorchid</tspan>. </text> </g>转载地址：http://zpqbi.baihongyu.com/