SVG文字介绍和用法详解 _文字

本文概述

旋转文字
多行文字
超级链接文字

要绘制文本, 使用< 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.srcmini.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：定义高度。
【SVG文字介绍和用法详解】fill：填充属性用于定义填充颜色。