示例
撰写文字：
下面是 SVG 代码
示例1
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 文本</h1>
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
</body>
</html>
尝试一下
下面的示例创建旋转文字：
下面是 SVG 代码
示例2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 旋转文本</h1>
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG!</text>
</svg>
</body>
</html>
尝试一下
<text> 元素可以与 <tspan> 元素一起排列在任意数量的子组中。 每个 <tspan> 元素可以包含不同的格式和位置。
多行文字（带有<tspan>元素）：
下面是 SVG 代码
示例3
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 多行文本</h1>
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">几行：
<tspan x="10" y="45">第一行</tspan>
<tspan x="10" y="70">第二行</tspan>
</text>
</svg>
</body>
</html>
尝试一下
下面是 SVG 文本作为链接（带有<a>元素）：
示例4
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 文本作为链接</h1>
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="/html-svg/342.html" target="_blank">
<text x="10" y="20" style="fill:red;">I love SVG!</text>
</a>
</svg>
</body>
</html>
尝试一下
