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.cainiaoplus.com 菜鸟教程 </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.cainiaoplus.com</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.cainiaoplus.com <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.cainiaoplus.com</text> </a> </g> </svg>测试看看‹/›
运行后效果如下:
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。