本文概述
要绘制文本, 使用<text>元素。
例子
<!DOCTYPE html>
<html>
<title>SVG Text</title>
<body>
<h1>SVG Text</h1>
<svg width="950" height="950">
<g>
<text x="40" y="23" >Text: </text>
<text x="40" y="40" fill="rgb(121, 0, 121)">WWW.srcmini.COM</text>
</g>
</svg>
</body>
</html>立即测试
解释
x：它定义了文本左上角的位置。
y：定义文本的最高位置。
width：定义宽度。
height：定义高度。
fill：填充属性用于定义填充颜色。
旋转文字
它用于创建旋转文本。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20, 40)">I love SVG</text>
</svg>
</body>
</html>立即测试
解释
×：定义左上角的位置。
y：定义最高位置。
width：定义宽度。
height：定义高度。
fill：填充属性用于定义填充颜色。
多行文字
它用于创建多行文本。使用<tspan>元素, 可以将<text>元素安排在任意数量的子组中。
例子
<!DOCTYPE html>
<html>
<title>SVG Text</title>
<body>
<h1>SVG Text</h1>
<svg width="570" height="100">
<g>
<text x="40" y="23" >Multiline Text: </text>
<text x="40" y="40" fill="rgb(121, 0, 121)">WWW.srcmini.COM
<tspan x="40" y="60" font-weight="bold"> This is Simple Easy learning. </tspan>
</text>
</g>
</svg>
</body>
</html>立即测试
解释
×：定义左上角的位置。
y：定义最高位置。
width：定义宽度。
height：定义高度。
fill：填充属性用于定义填充颜色。
超级链接文字
它用于创建具有超级链接的文本。
例子
<!DOCTYPE html>
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="20" y="10" >Text as Link: </text>
<a xlink:href="https://www.srcmini02.com/svg-tutorial" target="_blank">
<text font-family="Verdana" font-size="30" x="40" y="40"
fill="rgb(121, 0, 121)">WWW.srcmini.COM</text>
</a>
</g>
</svg>
</body>
</html>立即测试
解释
×：定义左上角的位置。
y：定义最高位置。
width：定义宽度。
height：定义高度。
fill：填充属性用于定义填充颜色。
