html如何使用SVG绘制文本

这篇文章给大家分享的是有关html如何使用SVG绘制文本的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

您也可以使用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>

感谢各位的阅读！关于“html如何使用SVG绘制文本”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！