[[389752]]

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的两当网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一、前言

SVG 元素用于在SVG图像中绘制文本。在svg中使用 元素,可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等。

二、基本文本

要绘制文本，使用 元素。

例：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
 
  
  
  
  
   
  
  
  
  
    
SVG Text
 
  
  
  
  
     
  
  
  
  
       
  
  
  
  
        Text:  
  
  
  
  
        http://pdcfighting.com/  
  
  
  
  
       
  
  
  
  
     
  
  
  
  
   
  
  
  
  
 
 
 
 
 

运行后效果如下:

代码解释

x：定义了文本左上角的位置 ，y：定义文本的顶部位置，width：定义宽度，height：定义高度。

fill：fill属性用于定义填充颜色。

三、旋转文字

用于创建旋转文本。

例：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
http://pdcfighting.com/ 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

运行后效果如下:

用法解释

x：定义左上角的位置。y：它定义顶部位置。width：定义宽度。height：定义高度。

fill：fill属性用于定义填充颜色。

四、多行文字

元素可以安排任何分小组与 元素的数量。每个 元素可以包含不同的格式和位置。几行文本(与 元素)。

例

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Multiline Text:  
  
  
  
  
http://pdcfighting.com/ 
  
  
  
  
ddaad 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

运行后效果如下:

用法解释

x：定义左上角的位置。y：它定义顶部位置。width：定义宽度。height：定义高度。

fill：fill属性用于定义填充颜色。

五、超级链接文字

用于创建具有超级链接的文本

示例

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Text as Link:  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
http://pdcfighting.com/ 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

运行后效果如下:

六、路径上的文字

下面是SVG代码：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
I love SVG I love SVG 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

运行效果如下：

七、总结

本文基于Html基础，详细的介绍了SVG中常见的文本效果，如何变换文字，如何在文本，如何添加文字超链接等等。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望对你学习有帮助。

标题名称：一篇文章带你了解SVG文本效果
文章网址：http://www.shufengxianlan.com/qtweb/news41/490641.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联