下一个 → ← 上一个

SVG 文本

17 Mar 2025 | 阅读 2 分钟

要绘制文本，需要使用 <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.JavaTPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

说明

x：定义文本左上角的位置。

y：定义文本的顶部位置。

width：定义宽度。

height：定义高度。

fill：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>

说明

x：定义左上角的位置。

y：定义顶部位置。

width：定义宽度。

height：定义高度。

fill：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.JavaTPoint.COM
               <tspan x="40" y="60" font-weight="bold"> This is Simple Easy learning. </tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

说明

x：定义左上角的位置。

y：定义顶部位置。

width：定义宽度。

height：定义高度。

fill：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="svg-tutorial" target="_blank">
               <text font-family="Verdana" font-size="30" x="40" y="40" 
               fill="rgb(121,0,121)">WWW.JavaTPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

说明

x：定义左上角的位置。

y：定义顶部位置。

width：定义宽度。

height：定义高度。

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

下一个主题SVG 描边

← 上一个下一个 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。