微信登录

矢量图形 - 文本元素 - SVG 文本的添加

矢量图形 - 文本元素 - SVG 文本的添加

在前端开发中，SVG（可缩放矢量图形）是一种强大的工具，它可以用于创建高质量、可缩放的图形和动画。其中，文本元素是 SVG 中一个重要的组成部分，允许我们在图形中添加文字信息。本文将深入介绍如何在 SVG 中添加文本，包括基本的文本添加、文本样式设置以及文本布局等方面。

基本的 SVG 文本添加

在 SVG 中，最基本的文本元素是 <text> 标签。通过该标签，我们可以在 SVG 图形中添加简单的文本内容。下面是一个简单的示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>SVG 文本添加示例</title>
  8. </head>
  10. <body>
  11.     <svg width="300" height="200">
  12.         <text x="50" y="100">Hello, SVG!</text>
  13.     </svg>
  14. </body>
  16. </html>

在上述代码中，我们创建了一个宽度为 300px，高度为 200px 的 SVG 画布。然后使用 <text> 标签添加了一段文本 “Hello, SVG!”。x 和 y 属性分别指定了文本的起始位置，这里 x="50" 表示文本从距离 SVG 画布左边缘 50px 的位置开始，y="100" 表示文本的基线（大致是字母底部所在的线）距离 SVG 画布上边缘 100px 的位置。

设置文本样式

我们可以通过 CSS 或直接在 <text> 标签中使用属性来设置文本的样式，例如字体、颜色、大小等。以下是一个设置文本样式的示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>SVG 文本样式设置示例</title>
  8.     <style>
  9.        .styled-text {
  10.             font-family: Arial, sans-serif;
  11.             font-size: 24px;
  12.             fill: blue;
  13.             stroke: red;
  14.             stroke-width: 1;
  15.         }
  16.     </style>
  17. </head>
  19. <body>
  20.     <svg width="300" height="200">
  21.         <text x="50" y="100" class="styled-text">Styled SVG Text</text>
  22.     </svg>
  23. </body>
  25. </html>

在这个示例中，我们使用 CSS 类 .styled-text 来设置文本的样式。font-family 指定了字体，font-size 指定了字体大小，fill 指定了文本的填充颜色，stroke 指定了文本的描边颜色，stroke-width 指定了描边的宽度。

文本布局

多行文本

在 SVG 中，<text> 标签本身不支持自动换行，要实现多行文本，我们可以使用 <tspan> 标签。下面是一个多行文本的示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>SVG 多行文本示例</title>
  8. </head>
  10. <body>
  11.     <svg width="300" height="200">
  12.         <text x="50" y="50">
  13.             <tspan x="50" y="50">First line of text.</tspan>
  14.             <tspan x="50" y="70">Second line of text.</tspan>
  15.             <tspan x="50" y="90">Third line of text.</tspan>
  16.         </text>
  17.     </svg>
  18. </body>
  20. </html>

在这个示例中，我们使用 <tspan> 标签来创建多行文本。每个 <tspan> 标签都有自己的 x 和 y 属性，用于指定文本的位置。

文本对齐

我们可以使用 text-anchor 属性来设置文本的水平对齐方式，取值可以是 start（默认值，左对齐）、middle（居中对齐）和 end（右对齐）。以下是一个文本对齐的示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>SVG 文本对齐示例</title>
  8. </head>
  10. <body>
  11.     <svg width="300" height="200">
  12.         <text x="150" y="50" text-anchor="start">Left-aligned text</text>
  13.         <text x="150" y="80" text-anchor="middle">Center-aligned text</text>
  14.         <text x="150" y="110" text-anchor="end">Right-aligned text</text>
  15.     </svg>
  16. </body>
  18. </html>

总结

功能 实现方式
基本文本添加 使用 <text> 标签，通过 x 和 y 属性指定位置
文本样式设置 通过 CSS 或直接在 <text> 标签中使用属性，如 font-family、font-size、fill、stroke 等
多行文本 使用 <tspan> 标签，每个 <tspan> 可以有自己的位置
文本对齐 使用 text-anchor 属性，取值为 start、middle 或 end

通过以上介绍，我们了解了如何在 SVG 中添加文本，以及如何设置文本的样式和布局。SVG 文本元素为我们在前端开发中创建丰富的图形和信息展示提供了强大的支持。

矢量图形 - 文本元素 - SVG 文本的添加