gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章一篇文章带你了解SVG 文本效果由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

1、前言

  。

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

2、基本文本

  。

要绘制文本,使用<text> 元素.

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <title>项目</title> 
  4.  
  5.   <body style="background-color: aqua;"
  6.     <h1>SVG Text</h1> 
  7.     <svg width="550" height="150"
  8.       <g> 
  9.         <text x="40" y="23">Text: </text> 
  10.         <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ </text> 
  11.       </g> 
  12.     </svg> 
  13.   </body> 
  14. </html> 

运行后效果如下

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

代码解释 。

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

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

3、旋转文字

  。

用于创建旋转文本.

例:

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

运行后效果如下

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

用法解释 。

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

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

4、多行文字

  。

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

例 。

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

运行后效果如下

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

用法解释 。

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

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

5、超级链接文字

  。

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

示例 。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body style="background-color: aqua;"
  4.  
  5. <svg width="500" height="100"
  6. <g> 
  7. <text x="20" y="10">Text as Link: </text> 
  8.  
  9. <a xlink:href="http://pdcfighting.com/" target="_blank"
  10. <text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/</text> 
  11. </a> 
  12. </g> 
  13. </svg> 
  14.  
  15. </body> 
  16. </html> 

运行后效果如下

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

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

6、路径上的文字

  。

下面是SVG代码:

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

运行效果如下:

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

7、总结

  。

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

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

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

原文地址:https://mp.weixin.qq.com/s/_dhmh9dL5rAcQj3Y11j18Q 。

最后此篇关于一篇文章带你了解SVG 文本效果的文章就讲到这里了,如果你想了解更多关于一篇文章带你了解SVG 文本效果的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com