SVG <text>元素用于在SVG图像中绘制文本。在svg中使用 <text>元素,可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等
要绘制文本，使用<text>元素。
示例
<h1>SVG Text</h1>
<svg width="550" height="150">
<g>
<text x="40" y="23" >Text: </text>
<text x="40" y="40" fill="rgb(121,0,121)">www.feishuai.vip 基础教程 </text>
</g>
</svg>运行后效果如下:
用法解释
x：它定义了文本左上角的位置。
y：它定义文本的顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
旋转文字
它用于创建旋转文本。
示例
<svg height="100" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">www.feishuai.vip</text>
</svg>运行后效果如下:
用法解释
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
多行文字
它用于创建多行文本。使用<tspan>元素，可以将<text>元素安排在任意数量的子组中。
示例
<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.feishuai.vip
<tspan x="40" y="60" font-weight="bold"> 在线基础教程. </tspan>
</text>
</g>
</svg>运行后效果如下:
用法解释
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
超级链接文字
它用于创建具有超级链接的文本。
示例
<svg width="500" height="100">
<g>
<text x="20" y="10" >Text as Link: </text>
<a xlink:href="/svg-tutorial" target="_blank">
<text font-family="Verdana" font-size="30" x="40" y="40"
fill="rgb(121,0,121)">www.feishuai.vip</text>
</a>
</g>
</svg>运行后效果如下:
用法解释
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。