一、前言
SVG <text> 元素用于在SVG图像中绘制文本。在svg中使用<text> 元素,可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等。
二、基本文本
要绘制文本，使用<text>元素。
例：
<!DOCTYPEhtml> <html> <title>项目</title> <bodystyle="background-color:aqua;"> <h1>SVGText</h1> <svgwidth="550"height="150"> <g> <textx="40"y="23">Text:</text> <textx="40"y="40"fill="rgb(121,0,121)">http://pdcfighting.com/</text> </g> </svg> </body> </html> 运行后效果如下:
代码解释
x：定义了文本左上角的位置 ，y：定义文本的顶部位置，width：定义宽度，height：定义高度。
fill：fill属性用于定义填充颜色。
三、旋转文字
用于创建旋转文本。
例：
<!DOCTYPEhtml> <html> <bodystyle="background-color:aqua;"> <svgheight="100"width="200"> <textx="0"y="15"fill="red"transform="rotate(3020,40)">http://pdcfighting.com/</text> </svg> </body> </html> 运行后效果如下:
用法解释
x：定义左上角的位置。y：它定义顶部位置。width：定义宽度。height：定义高度。
fill：fill属性用于定义填充颜色。
四、多行文字
元素可以安排任何分小组与 <tspan> 元素的数量。每个 <tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素)。
例
<!DOCTYPEhtml> <html> <bodystyle="background-color:aqua;"> <svgwidth="570"height="100"> <g> <textx="40"y="23">MultilineText:</text> <textx="40"y="40"fill="rgb(121,0,121)">http://pdcfighting.com/ <tspanx="40"y="60"font-weight="bold">ddaad</tspan> </text> </g> </svg> </body> </html> 运行后效果如下:
用法解释
x：定义左上角的位置。y：它定义顶部位置。width：定义宽度。height：定义高度。
fill：fill属性用于定义填充颜色。
五、超级链接文字
用于创建具有超级链接的文本
示例
<!DOCTYPEhtml> <html> <bodystyle="background-color:aqua;"> <svgwidth="500"height="100"> <g> <textx="20"y="10">TextasLink:</text> <axlink:href="http://pdcfighting.com/"target="_blank"> <textfont-family="Verdana"font-size="30"x="40"y="40"fill="rgb(121,0,121)">http://pdcfighting.com/</text> </a> </g> </svg> </body> </html> 运行后效果如下:
六、路径上的文字
下面是SVG代码：
<!DOCTYPEhtml> <html> <bodystyle="background-color:aqua;"> <svgxmlns="http://www.w3.org/2000/svg"version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <pathid="path1"d="M75,20a1,100,0100,0"/> </defs> <textx="10"y="100"style="fill:red;"> <textPathxlink:href="#path1">IloveSVGIloveSVG</textPath> </text> </svg> </body> </html> 运行效果如下：
七、总结
本文基于Html基础，详细的介绍了SVG中常见的文本效果，如何变换文字，如何在文本，如何添加文字超链接等等。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望对你学习有帮助。
原文地址：https://mp.weixin.qq.com/s/_dhmh9dL5rAcQj3Y11j18Q
最新文章
热门文章
猜你喜欢
