文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章带你了解SVG 文本效果

2024-12-03 08:15

关注

一、前言

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

二、基本文本

要绘制文本,使用元素。

例:

  1.  
  2.  
  3.   项目 
  4.  
  5.   "background-color: aqua;"
  6.      
  7.     "550" height="150"
  8.        
  9.         "40" y="23">Text:  
  10.         "40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/  
  11.        
  12.      
  13.    
  14.  

运行后效果如下:

代码解释

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

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

三、旋转文字

用于创建旋转文本。

例:

  1.  
  2.  
  3. "background-color: aqua;"
  4.  
  5. "100" width="200"
  6. "0" y="15" fill="red" transform="rotate(30 20,40)">http://pdcfighting.com/ 
  7.  
  8.  
  9.  
  10.  

运行后效果如下:

用法解释

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

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

四、多行文字

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

  1.  
  2.  
  3. "background-color: aqua;"
  4.  
  5. "570" height="100"
  6.  
  7. "40" y="23">Multiline Text:  
  8. "40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ 
  9. "40" y="60" font-weight="bold">ddaad 
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  

运行后效果如下:

用法解释

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

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

五、超级链接文字

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

示例

  1.  
  2.  
  3. "background-color: aqua;"
  4.  
  5. "500" height="100"
  6.  
  7. "20" y="10">Text as Link:  
  8.  
  9. "http://pdcfighting.com/" target="_blank"
  10. "Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ 
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  

运行后效果如下:

六、路径上的文字

下面是SVG代码:

  1.  
  2.  
  3. "background-color: aqua;"
  4.  
  5. "http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
  6.  
  7. "path1" d="M75,20 a1,1 0 0,0 100,0" /> 
  8.  
  9. "10" y="100" style="fill:red;"
  10. "#path1">I love SVG I love SVG 
  11.  
  12.  
  13.  
  14.  
  15.  

运行效果如下:

七、总结

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

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

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

 

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯