SVG元素用于在SVG中绘制多行文本。元素不是绝对定位每一行文本，而是可以相对于前一行文本定位一行文本。元素还使用户能够同时选择和复制粘贴多行文本，而不仅仅是一个文本元素。1、tspan的简单案例分析tspanline1tspanline2实际效果：注意如何导致文本行相对于每个文本行定位对方（彼此背后）。2.定位1.垂直定位如果要相对于彼此垂直放置线条，可以使用dy属性（deltay）。现在，因为第二个元素的dy属性设置为“10”，所以第二行文本显示在第一行文本下方10个像素处。tspanline1tspanline2运行效果：注意：如果要将元素定位在绝对y位置y，请使用属性将其视为元素。如果在dy属性中写入多个数字，则每个数字将应用于元素内文本的字符。示例：123运行效果：注意：字形之间的垂直间距现在如何变化。2.水平定位要使文本相对于x轴定位，请使用dx属性（deltax）。下面的示例显示了将dx设置为30的效果。示例（请注意，第二行文本现在相对于第一行文本的末尾（而非开头）显示30像素）tspanline1tspanline2运行效果：如果在dx属性中指定了多个数字，每个数字将应用于元素。示例123运行效果：也可以设置x属性，固定文本行的x坐标。如果您想要显示所有未调整的行的列表，这将很有用。这是一个在三行中将x设置为10的示例：">tspanline1tspanline2tspanline3运行效果：3.样式tspan元素可以通过单独设置元素样式。因此，您可以使用元素来设置文本块的样式，使其与其余文本不同。Hereisaboldword.运行结果4.基线偏移的上标和下标可以使用baseline-shiftCSS属性来使用元素创建上标和下标。这是一个SVG基线偏移示例，展示了如何：>superscript和subscriptmixedwithnormaltext.运行效果：（注：firefox可能不支持）5.总结本文基于SVG基础，引入相关元素的定位，改变不同的属性，实现不同的位置显示效果。以及基线偏移上下标在实际项目应用中的应用。本文使用丰富的效果图进行展示，可以让读者更好的理解。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。代码很简单，希望对大家学习有所帮助。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
