<text>元素用于绘制文本。
声明
以下是<text>元素的语法声明。 这里只显示了一些主要属性。
<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing" >
</text>
属性
| 编号 | 属性 | 描述 |
|---|---|---|
| 1 | x |
文本的x轴的坐标。 |
| 2 | y |
文本的y轴的坐标。 |
| 3 | dx |
随着x轴移动的坐标。 |
| 4 | dy |
随着y轴移动的坐标。 |
| 5 | rotate |
旋转应用于所有字形。 |
| 6 | textlength |
渲染文本的长度。 |
| 7 | lengthAdjust |
调整类型与文本的渲染长度。 |
示例
文件:testSVG.html -
<html>
<title>SVG文本</title>
<body>
<h1>简单SVG文本图片</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.YIIBAI.COM</text>
</g>
</svg>
</body>
</html>
在Chrome网络浏览器中打开testSVG.html ，可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。 Internet Explorer 9及更高版本还支持SVG图像呈现。
使用旋转
<html>
<title>SVG文本</title>
<body>
<h1>简单SVG文本图片</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" rotate="15" transform="rotate(30 20,40)" fill="rgb(121,0,121)">WWW.YiiBai.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>
在浏览器打开上面示例代码文件，得到以下结果 -
超链接文本
<html>
<title>SVG文本</title>
<body>
<h1>简单SVG文本图片</h1>
<svg width="800" height="800">
<g>
<text x="30" y="10" >Text as Link: </text>
<a xlink:href="http://www.yiibai.com/svg/" target="_blank">
<text font-family="Verdana" font-size="20" x="30" y="30"
fill="rgb(121,0,121)">WWW.Yiibai.COM</text>
</a>
</g>
</svg>
</body>
</html>
在浏览器打开上面示例代码文件，得到以下结果 -
