pin_drop当前位置:知识文库 ❯ 图文
多媒体：SVG文本 - 完整教程与代码示例
一、教程简介
SVG 提供了强大的文本渲染能力，不仅支持基本的文本显示，还支持多行文本、文本片段样式、沿路径排列文本等高级功能。<text> 定义文本元素，<tspan> 定义文本片段，<textPath> 实现沿路径排列文本。本教程将详细讲解 SVG 文本的各种用法。
二、核心概念
文本元素
文本属性
三、语法与用法
text - 基本文本
代码示例
<text x="100" y="50" font-size="24" fill="#333">Hello SVG</text>tspan - 文本片段
代码示例
<text x="100" y="50">
<tspan fill="red">Red</tspan>
<tspan fill="blue">Blue</tspan>
</text>
tspan 支持独立设置样式和位置偏移：
代码示例
<text>
<tspan x="10" dy="0">第一行</tspan>
<tspan x="10" dy="1.5em">第二行</tspan>
</text>textPath - 沿路径文本
代码示例
<defs>
<path id="myPath" d="M 50 100 Q 200 20 350 100" />
</defs>
<text>
<textPath href="#myPath">沿路径排列的文本</textPath>
</text>四、代码示例
示例1：SVG 文本全面演示
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 文本全面演示</title>
<style>
body {
margin: 0;
padding: 20px;
background: #0d1117;
color: #c9d1d9;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
svg { background: #161b22; border-radius: 8px; border: 1px solid #30363d; }
</style>
</head>
<body>
<h1>SVG 文本全面演示</h1>
<svg width="750" height="550" viewBox="0 0 750 550">
<!-- 1. 基本文本 -->
<text x="20" y="30" font-size="16" fill="#58a6ff" font-weight="bold">1. 基本文本</text>
<text x="20" y="55" font-size="24" fill="#c9d1d9">Hello SVG Text!</text>
<text x="20" y="80" font-size="18" fill="#8b949e" font-style="italic">你好，SVG 文本！</text>
<!-- 2. text-anchor 对齐 -->
<text x="20" y="110" font-size="16" fill="#58a6ff" font-weight="bold">2. text-anchor 对齐</text>
<line x1="375" y1="120" x2="375" y2="170" stroke="#e94560" stroke-dasharray="4" />
<text x="375" y="140" text-anchor="start" font-size="14" fill="#3fb950">start 对齐</text>
<text x="375" y="158" text-anchor="middle" font-size="14" fill="#f8b500">middle 对齐</text>
<text x="375" y="176" text-anchor="end" font-size="14" fill="#e94560">end 对齐</text>
<!-- 3. tspan 多样式 -->
<text x="20" y="210" font-size="16" fill="#58a6ff" font-weight="bold">3. tspan 多样式文本</text>
<text x="20" y="240" font-size="20">
<tspan fill="#e94560">红色</tspan>
<tspan fill="#f8b500">黄色</tspan>
<tspan fill="#3fb950">绿色</tspan>
<tspan fill="#58a6ff">蓝色</tspan>
<tspan fill="#d2a8ff">紫色</tspan>
</text>
<!-- 4. tspan 多行文本 -->
<text x="20" y="275" font-size="16" fill="#58a6ff" font-weight="bold">4. tspan 多行文本</text>
<text x="20" y="300" font-size="14" fill="#c9d1d9">
<tspan x="20" dy="0">第一行：SVG 文本默认不换行</tspan>
<tspan x="20" dy="1.6em">第二行：使用 tspan + dy 实现换行</tspan>
<tspan x="20" dy="1.6em">第三行：每行可以独立设置样式</tspan>
</text>
<!-- 5. 描边文本 -->
<text x="20" y="390" font-size="16" fill="#58a6ff" font-weight="bold">5. 描边文本</text>
<text x="20" y="430" font-size="36" font-weight="bold"
fill="none" stroke="#e94560" stroke-width="1.5">Stroke Text</text>
<text x="250" y="430" font-size="36" font-weight="bold"
fill="#58a6ff" stroke="#1f6feb" stroke-width="1">Fill+Stroke</text>
<!-- 6. textPath 沿路径文本 -->
<text x="20" y="465" font-size="16" fill="#58a6ff" font-weight="bold">6. textPath 沿路径文本</text>
<defs>
<path id="curve1" d="M 50 520 Q 200 470 375 520 Q 550 570 700 520" fill="none" />
<path id="circle1" d="M 600 490 A 60 60 0 1 1 599.99 490" fill="none" />
</defs>
<!-- 曲线文本 -->
<path d="M 50 520 Q 200 470 375 520 Q 550 570 700 520" fill="none" stroke="#30363d" stroke-width="1" stroke-dasharray="4" />
<text font-size="14" fill="#3fb950">
<textPath href="#curve1">SVG 文本可以沿着任意路径排列，实现各种曲线文字效果</textPath>
</text>
<!-- 圆形文本 -->
<circle cx="600" cy="490" r="60" fill="none" stroke="#30363d" stroke-width="1" stroke-dasharray="4" />
<text font-size="11" fill="#d2a8ff">
<textPath href="#circle1" startOffset="0%">SVG Circular Text Effect</textPath>
</text>
</svg>
</body>
</html>示例2：文本装饰与创意效果
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本装饰与创意效果</title>
<style>
body {
margin: 0;
padding: 20px;
background: #1a1a2e;
color: #eee;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
svg { background: #16213e; border-radius: 8px; border: 1px solid #333; }
</style>
</head>
<body>
<h1>SVG 文本创意效果</h1>
<svg width="700" height="400" viewBox="0 0 700 400">
<defs>
<linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e94560" />
<stop offset="50%" stop-color="#f8b500" />
<stop offset="100%" stop-color="#3fb950" />
</linearGradient>
<linearGradient id="textGrad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#58a6ff" />
<stop offset="100%" stop-color="#d2a8ff" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- 渐变文字 -->
<text x="350" y="50" text-anchor="middle" font-size="42" font-weight="bold" fill="url(#textGrad)">
渐变文字效果
</text>
<!-- 发光文字 -->
<text x="350" y="110" text-anchor="middle" font-size="36" font-weight="bold" fill="#58a6ff" filter="url(#glow)">
Glow Text Effect
</text>
<!-- 描边+填充 -->
<text x="350" y="170" text-anchor="middle" font-size="38" font-weight="bold"
fill="#0f172a" stroke="#58a6ff" stroke-width="2">
Outlined Text
</text>
<!-- 旋转文字 -->
<text x="100" y="250" font-size="20" fill="#3fb950" transform="rotate(-15, 100, 250)">
旋转文字
</text>
<text x="300" y="230" font-size="20" fill="#f8b500" transform="rotate(10, 300, 230)">
倾斜文字
</text>
<!-- letter-spacing -->
<text x="350" y="290" text-anchor="middle" font-size="18" fill="#d2a8ff" letter-spacing="8">
Letter Spacing
</text>
<!-- text-decoration -->
<text x="100" y="330" font-size="16" fill="#c9d1d9" text-decoration="underline">下划线文本</text>
<text x="250" y="330" font-size="16" fill="#c9d1d9" text-decoration="line-through">删除线文本</text>
<text x="430" y="330" font-size="16" fill="#c9d1d9" text-decoration="overline">上划线文本</text>
<!-- 竖排文字（使用 writing-mode） -->
<text x="650" y="180" font-size="14" fill="#8b949e" writing-mode="tb">竖排文字示例</text>
</svg>
</body>
</html>五、浏览器兼容性
六、注意事项与最佳实践
1. SVG 文本不自动换行
代码示例
<!-- SVG text 不支持自动换行 -->
<text>这是一段很长的文本，不会自动换行</text>
<!-- 使用 tspan 实现手动换行 -->
<text>
<tspan x="10" dy="0">第一行文本</tspan>
<tspan x="10" dy="1.5em">第二行文本</tspan>
</text>2. 使用 foreignObject 实现自动换行
代码示例
<foreignObject x="10" y="10" width="200" height="100">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px; color:#333;">
这段文本可以自动换行，因为使用了 HTML 的 div 元素。
</div>
</foreignObject>3. 字体加载
代码示例
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
}4. 文本选择
内联 SVG 中的文本可以被用户选择和复制，这是 SVG 相对于 Canvas 的优势之一。
七、代码规范示例
代码示例
<!-- 推荐：文本结构化 -->
<text x="100" y="100" font-family="'Segoe UI', sans-serif" font-size="16" fill="#333">
<tspan x="100" dy="0" font-weight="bold">标题</tspan>
<tspan x="100" dy="1.5em" font-size="14" fill="#666">正文内容第一行</tspan>
<tspan x="100" dy="1.3em" font-size="14" fill="#666">正文内容第二行</tspan>
</text>
<!-- 推荐：textPath 使用 href 而非 xlink:href -->
<defs>
<path id="curve" d="M 50 100 Q 200 50 350 100" />
</defs>
<text font-size="14" fill="#333">
<textPath href="#curve">沿路径的文本</textPath>
</text>八、常见问题与解决方案
常见问题
SVG 文本如何居中对齐？
使用 text-anchor 属性控制水平对齐，设置为 middle 可实现水平居中。同时使用 dominant-baseline 属性控制垂直对齐，设置为 central 可实现垂直居中。
SVG 文本为什么不自动换行？
SVG 的 text 元素设计上不支持自动换行。要实现多行文本，可以使用 tspan 元素配合 dy 属性实现手动换行，或使用 foreignObject 嵌入 HTML 内容。
textPath 文本方向如何调整？
textPath 的文本方向由路径方向决定。如果文本方向不对，可以调整路径的绘制方向（反转路径的起点和终点），或使用 side 属性控制文本在路径的哪一侧显示。
如何用 JavaScript 获取 SVG 文本的宽度？
使用 getBBox() 方法可以获取文本元素的边界框信息，返回包含 x、y、width、height 属性的对象。
tspan 元素有什么作用？
tspan 元素用于在 text 元素内定义文本片段，每个片段可以独立设置样式和位置。主要用途包括：为文本的不同部分设置不同样式、通过 x/y/dx/dy 属性精确控制文本位置、实现多行文本效果。
SVG 文本可以创建哪些创意效果？
SVG 文本支持多种创意效果：渐变填充、描边效果、发光效果、旋转和倾斜、文字装饰（下划线、删除线、上划线）、沿路径排列、字间距调整等。
九、总结
SVG 文本提供了丰富的排版能力，关键要点：
-
text：基本文本元素，支持各种字体属性
-
tspan：文本片段，支持独立样式、换行和偏移
-
textPath：沿路径排列文本，实现曲线文字效果
-
text-anchor：水平对齐（start/middle/end）
-
dominant-baseline：基线对齐
-
不自动换行：需使用 tspan 或 foreignObject
-
创意效果：渐变、描边、发光、旋转等
下一教程将介绍 SVG 渐变的使用。
标签：
SVG文本
text元素
tspan片段
textPath路径
文本对齐
曲线文字
本文涉及AI创作
内容由AI创作，请仔细甄别
