SVG 文本（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页设计和图形开发领域，可缩放矢量图形（SVG）凭借其清晰的分辨率无关性、轻量化的文件特性，逐渐成为现代前端开发的热门技术。而作为 SVG 的核心元素之一，“SVG 文本”不仅能够实现文字的矢量化渲染，还能通过丰富的属性和交互功能，为网页带来动态、灵活的文本展示效果。无论是设计图标中的文字标注，还是制作响应式数据可视化图表，掌握 SVG 文本的使用方法，都能为开发者提供更强大的创作工具。本文将从基础语法、核心属性、动态效果到实际案例，系统性地解析 SVG 文本的实现与应用。

SVG 文本的基础语法与核心概念

1. SVG 文本的基本结构

SVG 文本通过 <text> 标签定义，其位置、样式和内容均可通过属性和子元素进行控制。一个最简单的 SVG 文本示例如下：

<svg width="200" height="100">
  <text x="10" y="20" fill="blue">Hello SVG Text!</text>
</svg>

在这个例子中：

• <svg> 定义了画布的宽高，单位默认为像素；
• <text> 标签内的 x 和 y 属性指定了文本左下角的坐标（坐标系原点在 SVG 左上角）；
• fill 属性定义了文本颜色，类似 CSS 的 color 属性。

2. 文本坐标系与定位

SVG 的坐标系与 HTML 不同，其原点（0,0）位于左上角，y 轴向下延伸。因此，y 值越大，文本位置越靠下。例如，若将 y="20" 改为 y="80"，文本会出现在 SVG 的底部附近。

形象比喻：可以将 SVG 比作一张画布，<text> 元素就像一支笔，而 x 和 y 是笔尖落下的坐标。

SVG 文本的核心属性详解

1. 基础定位与样式属性

以下表格总结了 SVG 文本最常用的属性及其作用：

示例：通过 dx 和 dy 调整文本位置：

<text x="50" y="50" dx="20" dy="-10">调整后的文本</text>

2. 文本变形与路径绑定

SVG 文本不仅能静态显示，还能通过 <textPath> 将文字沿路径排列。例如，让文字沿着圆形路径流动：

<svg width="200" height="100">
  <defs>
    <path id="myPath" d="M10 10 Q 100 100 190 10" />
  </defs>
  <text font-size="12">
    <textPath href="#myPath">沿着曲线流动的文字</textPath>
  </text>
</svg>

3. 文本路径与变形的进阶技巧

• 路径引用：<textPath> 的 href 属性需指向 <path> 的 id；
• 路径方向：通过 side 属性控制文字在路径的哪一侧；
• 起始位置：startOffset 可设置文字开始的位置百分比。

SVG 文本的动态效果与交互

1. 通过 CSS 实现动画

SVG 文本支持 CSS3 动画，例如让文字渐显并旋转：

<svg width="200" height="200">
  <text class="animate-text" x="100" y="100" text-anchor="middle">
    动态文字
  </text>
</svg>

<style>
  .animate-text {
    animation: rotateText 2s linear infinite;
  }
  @keyframes rotateText {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

2. JavaScript 动态控制文本

通过 JavaScript 可以实时修改文本内容或样式，例如点击按钮改变颜色：

<svg id="mySvg" width="200" height="50">
  <text id="dynamicText" x="10" y="30">点击改变颜色</text>
</svg>
<button onclick="changeColor()">点击我</button>

<script>
  function changeColor() {
    const textElement = document.getElementById("dynamicText");
    textElement.style.fill = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  }
</script>

兼容性与性能优化

1. 浏览器兼容性

SVG 文本在现代浏览器中普遍支持，但以下细节需注意：

• 旧版浏览器：如 IE 8 及以下可能不支持部分高级属性；
• 百分比值：x="50%" 在不同浏览器中的计算基准可能有差异，建议使用绝对值或通过 JavaScript 动态计算。

2. 性能优化技巧

• 减少冗余元素：避免在大量文本元素中重复定义相同的样式；
• 使用 <text> 的 textLength 和 lengthAdjust 属性，控制文本宽度并保持可读性：

<text textLength="100" lengthAdjust="spacingAndGlyphs">
  自动调整宽度的文本
</text>

实战案例：制作可交互的 SVG 文本仪表盘

案例需求

创建一个圆形仪表盘，中心显示动态更新的数值，并通过鼠标悬停触发动画效果。

实现步骤

1. 定义 SVG 容器与背景圆环：

<svg width="300" height="300" viewBox="0 0 300 300">
  <circle cx="150" cy="150" r="120" fill="none" stroke="#ccc" stroke-width="20"/>
</svg>

2. 添加动态文本：

<text id="valueText" x="150" y="150" text-anchor="middle" 
      dominant-baseline="central" font-size="36" fill="#333">
  0
</text>

3. 添加交互与动画：

<script>
  const textElement = document.getElementById("valueText");
  let currentValue = 0;
  
  // 每秒更新数值
  setInterval(() => {
    currentValue = Math.floor(Math.random() * 100);
    textElement.textContent = currentValue;
    textElement.style.fill = currentValue > 80 ? "red" : "green";
  }, 1000);
</script>

案例效果

• 文本实时更新数值并改变颜色；
• 圆形背景与文本结合，形成直观的仪表盘效果。

结论

通过本文的讲解，开发者可以掌握 SVG 文本从基础定位到动态交互的完整实现路径。无论是静态标注、路径文字，还是结合 CSS 和 JavaScript 的复杂动画，SVG 文本都能提供高效且灵活的解决方案。在实际项目中，建议结合性能优化技巧（如减少冗余元素、利用 CSS 动画）进一步提升用户体验。

下一步行动：尝试将本文中的代码示例复制到本地环境运行，通过修改属性值观察效果变化，逐步探索 SVG 文本的更多可能性。