您也可以使用SVG在网页上绘制文本。SVG中的文本呈现为图形，因此您可以对其应用所有图形转换，但是它仍然像文本一样工作-意味着用户可以选择它并将其复制为文本。让我们尝试一个例子，看看它是如何工作的：

 

例试试这个代码»

<svg width="300" height="200">

    <text x="20" y="30" style="fill:purple; font-size:22px;">

        Welcome to Our Website!

    </text>

    <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">

        Here you will find lots of useful information.

    </text>

</svg>

属性x和y的<text>元素以绝对值定义左上角的位置，而属性dx和dy指定相对位置。

 

您甚至可以使用该<tspan>元素来重新格式化或重新定位<text>元素中包含的文本范围。单击并拖动以选择文本时，可以一次选择包含在单独的tspan中但在同一文本元素内的文本。但是，不能同时选择单独文本元素中的文本。让我们看一个例子：

 

例试试这个代码»

<svg width="300" height="200">

    <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">

        <tspan style="fill:purple; font-size:22px;">

            Welcome to Our Website!

        </tspan>

        <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">

            Here you will find lots of useful information.

        </tspan>

    </text>

</svg>