一篇文章带你了解SVG 文本效果

SVG <text> 元素用于在SVG图像中绘制文本。在svg中使用<text> 元素,可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等。

要绘制文本，使用<text>元素。

例：

运行后效果如下:

代码解释

x：定义了文本左上角的位置，y：定义文本的顶部位置，width：定义宽度，height：定义高度。

fill：fill属性用于定义填充颜色。

用于创建旋转文本。

例：

<!DOCTYPEhtml>
<html>
<bodystyle="background-color:aqua;">
<svgheight="100"width="200">
<textx="0"y="15"fill="red"transform="rotate(3020,40)">http://pdcfighting.com/</text>
</svg>
</body>
</html>

运行后效果如下:

用法解释

x：定义左上角的位置。y：它定义顶部位置。width：定义宽度。height：定义高度。

fill：fill属性用于定义填充颜色。

元素可以安排任何分小组与 <tspan> 元素的数量。每个 <tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素)。

例

运行后效果如下:

用法解释

x：定义左上角的位置。y：它定义顶部位置。width：定义宽度。height：定义高度。

fill：fill属性用于定义填充颜色。

用于创建具有超级链接的文本

示例

<!DOCTYPEhtml>
<html>
<bodystyle="background-color:aqua;">
<svgwidth="500"height="100">
<g>
<textx="20"y="10">TextasLink:</text>
<axlink:href="http://pdcfighting.com/"target="_blank">
<textfont-family="Verdana"font-size="30"x="40"y="40"fill="rgb(121,0,121)">http://pdcfighting.com/</text>
</a>
</g>
</svg>
</body>
</html>

运行后效果如下:

下面是SVG代码：

<!DOCTYPEhtml>
<html>
<bodystyle="background-color:aqua;">
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pathid="path1"d="M75,20a1,100,0100,0"/>
</defs>
<textx="10"y="100"style="fill:red;">
<textPathxlink:href="#path1">IloveSVGIloveSVG</textPath>
</text>
</svg>
</body>
</html>