1. 为什么SVG文字特效值得前端花时间琢磨
做前端这些年，我经手过不少视觉需求，从简单的渐变文字到复杂的动态标题，绕来绕去发现一个规律：凡是跟"文字特效"沾边的活儿，用CSS硬扛往往能出效果，但一旦遇到描边、路径动画、文字沿曲线排列这类需求，CSS就开始力不从心了。这时候SVG才是真正的主角。
SVG绘制文字特效，说白了就是用<text>标签配合<defs>、<path>、<mask>、<filter>这些元素，把文字当成矢量图形来处理。它跟普通HTML文字最大的区别在于：HTML文字是排版引擎渲染的，你能控制字号、颜色、字重，但控制不了文字的"形状"；而SVG文字本质上是图形，你可以给它加描边动画、填充图案、做路径裁剪、甚至让文字沿着任意曲线跑。
这套方案适合谁？我总结下来有三类人最该掌握：一是做营销落地页的前端，经常需要那种一眼抓住人的标题动效；二是做数据可视化的开发者，图表里的标签文字需要特殊处理；三是想提升视觉表现力的全栈工程师，不想每次都求设计师切图。掌握SVG文字特效之后，很多以前必须用图片或Canvas才能实现的效果，现在几行代码就能搞定，而且清晰度无损、可交互、可访问。
这篇文章我会从最基础的SVG文字结构讲起，逐步深入到描边动画、渐变填充、路径文字、遮罩特效这几个实战方向，每个方向都配上可直接复制的代码和我在实际项目中踩过的坑。不堆砌API文档，只讲真正用得上的东西。
2. SVG文字的基础骨架与坐标系陷阱
2.1 一个最小可用的SVG文字结构
先看最朴素的写法，这是所有特效的起点：
<svg viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg"> <text x="300" y="120" text-anchor="middle" font-size="72" font-family="sans-serif" fill="#333"> 文字特效 </text> </svg>这段代码里几个属性必须搞清楚，不然特效做出来位置全是歪的：
viewBox定义了SVG的内部坐标系，四个值分别是min-x min-y width height。它决定了你后续所有坐标的参照系。x和y是文字基线的起点位置，注意y指的是基线，不是文字顶部也不是底部。这一点跟CSS的top完全不同，我第一次用的时候文字总是偏上，就是因为把y当成了顶部。text-anchor控制水平对齐，middle表示以x为中心，start是左对齐，end是右对齐。做居中标题必用middle。dominant-baseline控制垂直对齐，可选middle、central、hanging等。想让文字在某个矩形里垂直居中，用dominant-baseline="middle"配合y设为矩形中心高度。
提示：
font-size在SVG里默认单位是用户坐标单位，不是px。如果你用viewBox做了缩放，实际渲染出来的字号会跟着缩放。这一点在响应式场景下要特别注意。
2.2 坐标系缩放带来的字号困惑
我见过太多人在这里翻车。假设你写了一个viewBox="0 0 100 100"的SVG，然后设置font-size="20"，在1000px宽的容器里显示，实际字号会被放大10倍变成200px。这不是bug，是SVG的缩放机制。
解决办法有两个：一是让viewBox的尺寸尽量接近实际显示尺寸，比如容器宽600px就设viewBox="0 0 600 xxx"；二是用preserveAspectRatio控制缩放行为。我个人的习惯是前者，因为坐标算起来直观，不用在脑子里做换算。
另外，<text>元素里的文字不会自动换行，这是跟HTML文字最大的体验差异。长文本要么手动拆成多个<tspan>，要么用<foreignObject>嵌入HTML。做标题特效一般文字都短，这个问题不突出，但做段落文字时一定要提前规划。
2.3 字体加载与跨平台一致性
SVG文字用的字体跟页面其他文字一样，受系统字体影响。如果你用了自定义字体，必须确保字体在SVG渲染前已经加载完成，否则会出现字体闪烁（FOUT）。我的做法是在CSS里用font-display: block配合document.fonts.ready，等字体就绪后再触发SVG动画。
还有一个坑：不同系统对同一字体的渲染宽度不一样。比如你按某个字体的宽度算好了文字居中位置，换台电脑字体回退到系统默认，文字宽度变了，居中就偏了。解决办法是用textLength属性强制指定文字总宽度，或者用getComputedTextLength()在运行时动态计算。做精确对齐的特效时，我强烈建议用后者。
3. 描边动画：让文字像被一笔一画写出来
3.1 stroke-dasharray与stroke-dashoffset的原理
描边动画是SVG文字特效里最经典的一种，效果就是文字像被一支笔慢慢写出来。核心靠两个属性：stroke-dasharray和stroke-dashoffset。
stroke-dasharray定义虚线的"实线段长度"和"空白段长度"。当你把实线段长度设成大于等于路径总长度，空白段设成同样大，整条路径就变成了一段实线加一段空白。然后通过stroke-dashoffset控制这段实线的偏移量，就能实现"逐渐画出"的效果。
关键问题是：文字的总路径长度怎么算？<text>元素不像<path>那样有明确的长度，但可以用JS获取：
const textEl = document.querySelector('#myText'); const length = textEl.getComputedTextLength(); textEl.style.strokeDasharray = length; textEl.style.strokeDashoffset = length; // 然后通过动画把 strokeDashoffset 从 length 变到 0这里有个细节：getComputedTextLength()返回的是文字排版长度，但描边动画实际走的是每个字形的轮廓路径，两者不完全相等。实测下来，把strokeDasharray设成length * 1.2左右比较保险，能保证文字完全被覆盖。
3.2 用CSS animation驱动描边
拿到长度之后，动画部分用CSS就能搞定，不需要JS逐帧控制：
@keyframes draw { to { stroke-dashoffset: 0; } } .draw-text { fill: transparent; stroke: #e63946; stroke-width: 2; animation: draw 3s ease forwards; }配合前面的JS设置初始strokeDashoffset，文字就会从无到有被"写"出来。fill: transparent让填充先隐藏，只显示描边，等描边画完再考虑是否显示填充。
我实际用的时候发现，ease缓动会让开头快结尾慢，写出来的感觉不太自然。改成linear或者自定义cubic-bezier(0.4, 0, 0.2, 1)更接近真实书写节奏。另外stroke-linecap: round和stroke-linejoin: round能让笔画端点圆润，看起来更像手写。
3.3 多字依次描边的编排技巧
单个文字描边好看，但多个字一起描边就少了层次感。想要"一个字一个字写出来"的效果，需要给每个字单独设置动画延迟。
做法是把每个字拆成独立的<tspan>或<text>，然后给它们设置递增的animation-delay：
<svg viewBox="0 0 600 200"> <text x="50" y="120" font-size="80" class="draw-text" style="animation-delay: 0s">文</text> <text x="150" y="120" font-size="80" class="draw-text" style="animation-delay: 0.5s">字</text> <text x="250" y="120" font-size="80" class="draw-text" style="animation-delay: 1s">特</text> <text x="350" y="120" font-size="80" class="draw-text" style="animation-delay: 1.5s">效</text> </svg>每个字的strokeDasharray和strokeDashoffset需要单独用JS计算，因为每个字的长度不同。我写了个小函数批量处理：
document.querySelectorAll('.draw-text').forEach(el => { const len = el.getComputedTextLength() * 1.2; el.style.strokeDasharray = len; el.style.strokeDashoffset = len; });注意：
animation-delay是加在CSS动画上的，但strokeDashoffset的初始值是JS设的。如果JS执行晚于CSS动画开始，会出现闪烁。稳妥做法是给元素先加一个visibility: hidden，JS设置完再显示。
3.4 描边动画的性能与兼容性实测
描边动画本质上是改变stroke-dashoffset，这个属性属于合成层之外的属性，会触发重绘。文字少的时候无所谓，但如果页面上有几十个描边文字同时动画，低端设备上会掉帧。
优化思路有两个：一是用will-change: stroke-dashoffset提前告知浏览器，但别滥用，用多了反而占内存；二是控制同时动画的元素数量，用IntersectionObserver让文字进入视口才开始动画。
兼容性方面，stroke-dasharray和stroke-dashoffset在所有现代浏览器都支持，包括移动端。唯一要注意的是IE，不过现在基本可以不管了。Safari上有个老问题：getComputedTextLength()在字体未加载完成时返回的值偏小，导致描边动画提前结束。解决办法就是前面说的，等document.fonts.ready之后再计算。
4. 渐变与图案填充：给文字穿上质感外衣
4.1 linearGradient实现金属质感
纯色文字太单调，渐变填充是提升质感最快的方式。SVG里用<linearGradient>定义渐变，然后通过fill="url(#gradientId)"引用：
<svg viewBox="0 0 600 200"> <defs> <linearGradient id="metal" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#f0f0f0"/> <stop offset="30%" stop-color="#c0c0c0"/> <stop offset="50%" stop-color="#ffffff"/> <stop offset="70%" stop-color="#a0a0a0"/> <stop offset="100%" stop-color="#808080"/> </linearGradient> </defs> <text x="300" y="130" text-anchor="middle" font-size="90" font-weight="bold" fill="url(#metal)"> 金属质感 </text> </svg>这个渐变的关键在于多个stop的明暗交替。金属反光的特征是"亮-暗-亮-暗"的条纹感，所以我在30%和70%位置放了暗色，50%位置放最亮的白色，模拟高光。x1/y1/x2/y2控制渐变方向，垂直渐变（x相同，y从0到100%）最适合做金属拉丝效果。
实测下来，font-weight: bold对金属质感帮助很大，细字体做不出厚重感。另外可以叠加一个<filter>做轻微模糊，让高光过渡更柔和，但模糊会牺牲清晰度，看具体场景取舍。
4.2 radialGradient做发光文字
径向渐变适合做发光效果，光从文字中心向外扩散：
<defs> <radialGradient id="glow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fff9c4"/> <stop offset="40%" stop-color="#ffeb3b"/> <stop offset="100%" stop-color="#f57f17"/> </radialGradient> </defs>cx和cy是渐变中心，r是半径。做发光文字时，中心用接近白色的亮色，边缘用饱和的暖色，视觉上就像文字在发光。
如果想要更强的发光感，可以叠加<filter>里的feGaussianBlur：
<filter id="blur"> <feGaussianBlur stdDeviation="3"/> </filter>然后复制一层文字，底层加模糊滤镜做光晕，顶层保持清晰。这种"双层文字"的技法在霓虹灯效果里特别常用。
4.3 pattern填充做纹理文字
<pattern>可以定义重复图案，用来给文字填充纹理，比如条纹、波点、格子：
<defs> <pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="5" height="10" fill="#333"/> <rect x="5" width="5" height="10" fill="#f0f0f0"/> </pattern> </defs> <text fill="url(#stripes)" ...>条纹文字</text>patternUnits="userSpaceOnUse"表示图案坐标用SVG用户坐标，这样图案不会随文字缩放而变形。patternTransform可以旋转、缩放图案，做斜条纹就靠它。
这里有个容易忽略的点：图案的width和height决定了重复周期，太小会显得密集，太大又看不出纹理。我一般从10到20之间试，配合patternTransform微调角度。另外图案填充的文字在小字号下会糊成一片，建议字号至少48以上再用。
4.4 渐变与描边的组合玩法
单独用渐变或描边都不够惊艳，组合起来才有层次。常见做法是：填充用渐变，描边用对比色，再加一层阴影：
<text x="300" y="130" text-anchor="middle" font-size="90" font-weight="bold" fill="url(#metal)" stroke="#333" stroke-width="2" paint-order="stroke fill"> 组合特效 </text>paint-order="stroke fill"这个属性很关键，它让描边画在填充下面，这样描边不会盖住填充的渐变细节，文字看起来更立体。默认顺序是fill stroke markers，描边会压在填充上，视觉上文字会变"瘦"。
我做过一个对比测试：同样的渐变文字，加paint-order调整前后，前者明显更饱满。这个属性在现代浏览器支持良好，可以放心用。
5. 路径文字：让文字沿着任意曲线跑
5.1 textPath的基本用法
让文字沿着曲线排列，靠的是<textPath>元素配合<path>：
<svg viewBox="0 0 600 300"> <defs> <path id="curve" d="M 50 200 Q 300 50 550 200" fill="none"/> </defs> <text font-size="32" fill="#333"> <textPath href="#curve" startOffset="50%" text-anchor="middle"> 文字沿着这条曲线排列 </textPath> </text> </svg><path>的d属性定义曲线，M是起点，Q是二次贝塞尔曲线（一个控制点），C是三次贝塞尔（两个控制点）。textPath的href指向路径的id，startOffset控制文字在路径上的起始位置，50%表示从中间开始。
text-anchor="middle"配合startOffset="50%"能让文字在曲线上居中，这个组合做弧形标题特别实用。
5.2 路径方向与文字可读性
路径文字有个反直觉的地方：文字是沿着路径的"方向"排列的。如果路径是从右往左画的，文字就会倒过来。所以画路径时要注意方向，从左到右、从上到下是正常阅读方向。
另外，曲线弯曲程度太大时，文字会挤在一起或者拉得很开。这是因为textPath按路径长度均匀分布文字，曲率大的地方单位长度对应的视觉宽度小。解决办法是调整路径的曲率，或者用letter-spacing微调字间距。我一般会把曲线的控制点拉远一点，让曲率平缓些。
5.3 动态路径文字的实现思路
静态路径文字好看，但动态的更有冲击力。常见需求是文字沿着路径"流动"或者"逐个出现"。
流动效果靠动画startOffset：
@keyframes flow { from { start-offset: 0%; } to { start-offset: 100%; } }不过start-offset在CSS里不是标准属性，需要用JS或者SMIL动画。SMIL写法：
<textPath href="#curve"> 流动的文字 <animate attributeName="startOffset" from="0%" to="100%" dur="5s" repeatCount="indefinite"/> </textPath>SMIL动画在Chrome和Firefox支持良好，Safari也支持，但部分场景下性能不如CSS。如果追求性能，可以用JS的requestAnimationFrame手动更新startOffset。
逐个出现的效果则是把文字拆成多个<tspan>，每个tspan设置不同的opacity动画延迟。这个跟前面描边动画的编排思路一样。
5.4 路径文字的实战避坑
我在项目里用路径文字踩过几个坑，这里集中说一下。
第一个坑：路径不可见但必须存在。<path>如果设了fill="none"和stroke="none"，有些浏览器会认为路径无效，导致文字不显示。稳妥做法是设stroke="transparent"或者stroke-width="0"，保留路径的"存在感"。
第二个坑：viewBox和路径坐标不匹配。路径的坐标是相对于SVG用户坐标系的，如果viewBox设得不对，路径可能跑到可视区域外，文字自然就看不见了。调试时先把路径的stroke设成可见颜色，确认路径位置对了再隐藏。
第三个坑：文字太长超出路径。textPath不会自动截断，超出路径长度的文字会消失。可以用textLength限制总长度，或者提前用getComputedTextLength()判断。
6. 遮罩与裁剪：文字特效的高级玩法
6.1 mask实现文字渐隐渐现
<mask>可以控制元素的可见区域，用它做文字渐隐效果非常自然：
<defs> <mask id="fadeMask"> <rect width="600" height="200" fill="url(#fadeGradient)"/> </mask> <linearGradient id="fadeGradient"> <stop offset="0%" stop-color="#000"/> <stop offset="50%" stop-color="#fff"/> <stop offset="100%" stop-color="#000"/> </linearGradient> </defs> <text mask="url(#fadeMask)" ...>渐隐文字</text>遮罩的原理是：白色区域完全显示，黑色区域完全隐藏，灰色区域半透明。所以渐变从黑到白再到黑，文字就呈现"两端淡出、中间清晰"的效果。
这个技法做"文字从雾中浮现"的动画特别好用。把渐变的offset做成动画，文字就会逐渐显现。
6.2 clipPath做文字裁剪
<clipPath>跟mask类似，但只有"显示"和"隐藏"两种状态，没有半透明。用它可以把文字裁剪成特定形状：
<defs> <clipPath id="circleClip"> <circle cx="300" cy="100" r="80"/> </clipPath> </defs> <text clip-path="url(#circleClip)" ...>被圆形裁剪的文字</text>文字超出圆形区域的部分会被裁掉，只保留圆内的部分。这个技法做"文字从圆形里透出来"的效果很直接。
clipPath和mask的区别在于性能和精度：clipPath性能更好，但边缘是硬切的；mask支持渐变和半透明，但性能开销大一些。做硬边裁剪用clipPath，做柔和过渡用mask。
6.3 文字作为遮罩裁剪图片
反过来，也可以用文字作为遮罩去裁剪图片，实现"图片填充文字"的效果：
<defs> <mask id="textMask"> <text x="300" y="130" text-anchor="middle" font-size="100" font-weight="bold" fill="#fff">图片文字</text> </mask> </defs> <image href="your-image.jpg" width="600" height="200" mask="url(#textMask)"/>文字在遮罩里是白色，所以图片只在文字形状的区域显示，视觉上就是"图片填充在文字里"。这个效果做视频封面、海报标题特别出彩。
注意：
<image>的href在旧版浏览器里要用xlink:href，现在现代浏览器都支持href了，但为了兼容性可以两个都写。
6.4 遮罩动画的性能考量
遮罩动画虽然好看，但性能是它的软肋。每次遮罩变化都会触发整个被遮罩元素的重新合成，元素大、动画复杂时容易掉帧。
优化建议：一是尽量用clipPath代替mask，如果不需要半透明效果；二是把遮罩动画限制在小区域，别让整个页面都参与重绘；三是用transform动画代替遮罩属性动画，因为transform走合成层，性能好得多。
我做过一个测试：同样大小的文字，用mask做渐隐动画，在低端安卓机上帧率只有30左右；改成用opacity配合transform模拟类似效果，帧率能稳定在55以上。所以能用简单属性实现的效果，就别上遮罩。
7. 实战组合：一个完整的SVG文字特效案例
7.1 需求拆解与技术选型
假设要做一个营销页面的主标题特效，需求是：文字有金属渐变填充，入场时逐个描边写出，写完后有轻微发光呼吸效果，整体沿一条平缓的弧线排列。
拆解一下：金属渐变用linearGradient，逐个描边用多<text>加animation-delay，发光呼吸用filter的feGaussianBlur配合opacity动画，弧线排列用textPath。
但这里有个冲突：textPath要求文字在一个<text>里，而逐个描边要求文字拆成多个<text>。两者不能直接共存。我的解决方案是放弃textPath，用多个<text>手动计算每个字的坐标，模拟弧线排列。虽然麻烦点，但可控性更强。
7.2 逐字坐标计算与动画编排
弧线排列的坐标计算用圆的参数方程：假设弧线是半径为R的圆的一部分，圆心在(cx, cy)，每个字的角度是θ，那么字的坐标是：
x = cx + R * cos(θ) y = cy + R * sin(θ)用JS批量计算：
const chars = ['文', '字', '特', '效', '演', '示']; const cx = 300, cy = 400, R = 300; const startAngle = -Math.PI * 0.7; const angleStep = Math.PI * 0.4 / (chars.length - 1); chars.forEach((char, i) => { const angle = startAngle + angleStep * i; const x = cx + R * Math.cos(angle); const y = cy + R * Math.sin(angle); // 创建 text 元素，设置 x, y, 旋转角度 // 旋转角度 = angle + Math.PI / 2，让文字垂直于弧线 });每个字的旋转角度要加上90度（Math.PI / 2），这样文字才是"站"在弧线上的，而不是平躺。
动画编排上，每个字的描边动画延迟设为i * 0.3s，发光呼吸动画在所有描边完成后开始，用animation-delay叠加。
7.3 完整代码与效果调优
把上面的思路整合成完整代码，核心结构如下：
<svg viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="metal" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#f5f5f5"/> <stop offset="35%" stop-color="#b0b0b0"/> <stop offset="50%" stop-color="#ffffff"/> <stop offset="65%" stop-color="#909090"/> <stop offset="100%" stop-color="#606060"/> </linearGradient> <filter id="glow"> <feGaussianBlur stdDeviation="4" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g id="textGroup"></g> </svg>JS部分负责生成文字、计算坐标、设置动画。调优时重点看三个地方：描边速度是否跟文字复杂度匹配（笔画多的字要慢一点）、发光强度是否过曝（stdDeviation别超过5）、弧线曲率是否影响可读性（曲率太大文字会挤）。
我实际调这个效果花了大概两小时，大部分时间在微调每个字的延迟和发光参数。经验是：动画总时长控制在3到4秒，太短显得仓促，太长用户等不及。发光呼吸的周期设2秒左右，幅度别太大，轻微即可。
7.4 响应式适配与降级方案
SVG的响应式靠viewBox和preserveAspectRatio。默认preserveAspectRatio="xMidYMid meet"会保持宽高比并居中，适合大多数场景。如果想让文字铺满容器，用preserveAspectRatio="none"，但文字会被拉伸变形，一般不推荐。
降级方案要考虑两种情况：一是不支持SVG的极老浏览器（基本可以忽略），二是用户开启了"减少动态效果"（prefers-reduced-motion）。后者是真实存在的需求，做动画时应该尊重：
@media (prefers-reduced-motion: reduce) { .draw-text { animation: none; stroke-dashoffset: 0; fill: url(#metal); } }这样用户在系统里开了减少动效，文字就直接显示最终状态，不做描边动画。这是无障碍的基本要求，别忽略。
8. 我踩过的那些坑与性能优化心得
8.1 字体加载时序导致的描边错位
前面提过字体加载的问题，这里展开说。getComputedTextLength()在字体未加载时返回的是回退字体的宽度，等自定义字体加载完，文字宽度变了，但strokeDasharray还是按旧宽度设的，结果就是描边动画要么提前结束，要么拖尾。
我的解决方案是监听document.fonts.ready：
document.fonts.ready.then(() => { initStrokeAnimation(); });如果字体是通过@font-face加载的，还可以用document.fonts.load('72px MyFont')精确等待某个字体。这个坑我在三个项目里都遇到过，每次都是字体加载时序的问题，现在成了条件反射，写描边动画必加字体等待。
8.2 大量SVG元素的渲染开销
一个页面上如果有几十个SVG文字特效，每个都带滤镜和动画，性能会急剧下降。我做过压力测试：50个带feGaussianBlur的文字同时动画，中端笔记本上帧率掉到20以下。
优化手段有几个：一是用<use>复用定义好的图形，减少DOM节点；二是把不动的文字合并成一个<text>，减少元素数量；三是用IntersectionObserver做懒动画，只让视口内的文字动；四是滤镜尽量用CSS的filter代替SVG的feGaussianBlur，前者在某些浏览器上有硬件加速。
实测下来，IntersectionObserver加懒动画的效果最明显，能把初始渲染时间减少60%以上。
8.3 移动端的触摸与缩放问题
SVG在移动端有个默认行为：双指缩放会缩放整个页面，而不是SVG。如果想让SVG独立缩放，需要设置touch-action：
svg { touch-action: none; }但这会禁用页面的滚动，要谨慎使用。大多数文字特效不需要交互，保持默认即可。
另一个移动端问题是viewBox在小屏幕上的表现。如果viewBox设得太大，文字在小屏上会缩得很小，看不清。我的做法是用媒体查询针对小屏调整viewBox，或者用JS动态计算合适的viewBox。
8.4 可访问性与SEO的兼顾
SVG文字对屏幕阅读器是可见的，但如果你把文字拆成多个<text>做动画，阅读器会逐个读出来，体验很差。解决办法是给SVG加role="img"和aria-label，把完整文字放在aria-label里，然后给内部的<text>加aria-hidden="true"：
<svg role="img" aria-label="文字特效演示"> <text aria-hidden="true">文</text> <text aria-hidden="true">字</text> ... </svg>SEO方面，SVG文字是能被搜索引擎抓取的，但权重不如HTML文字。如果这段文字对SEO重要，建议在SVG旁边放一个视觉隐藏的HTML版本：
<h1 class="sr-only">文字特效演示</h1>.sr-only是常见的视觉隐藏类，不影响布局但能被搜索引擎和屏幕阅读器读取。
8.5 调试SVG的实用工具与技巧
调试SVG比调试HTML麻烦，因为元素不可见时很难定位。我的几个常用技巧：
一是临时给所有<path>和<text>加stroke="red" stroke-width="1"，看清它们的实际位置和形状。二是用浏览器的开发者工具选中SVG元素，Chrome和Firefox都能高亮显示元素的边界框。三是用<rect>画参考线，确认坐标系对齐。
还有一个神器是SVG的<view>元素配合preserveAspectRatio，可以快速切换不同的视图区域，调试大尺寸SVG时特别方便。不过这个用得少，知道有这回事就行。
9. 从特效到产品：什么场景该用SVG文字
9.1 适合与不适合的场景对比
SVG文字特效虽好，但不是万能。我整理了一个对比表，帮你快速判断：
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 营销页主标题动效 | SVG文字 | 视觉冲击强，清晰度无损 |
| 数据图表标签 | SVG文字 | 与图表坐标系天然契合 |
| 正文段落文字 | HTML文字 | SVG不支持自动换行，排版麻烦 |
| 大量文字列表 | HTML文字 | SVG元素多，性能差 |
| 需要文本选择的场景 | HTML文字 | SVG文字选择体验差 |
| 文字沿曲线排列 | SVG文字 | CSS无法实现 |
| 文字填充图片/视频 | SVG文字 | mask/clipPath是唯一方案 |
核心判断标准：如果文字需要"被当成图形处理"，用SVG；如果文字就是"用来读的"，用HTML。
9.2 与Canvas方案的取舍
Canvas也能画文字特效，而且性能通常更好。两者的区别在于：SVG是声明式的，DOM结构清晰，可交互、可访问、可被CSS控制；Canvas是命令式的，一切靠JS绘制，灵活但维护成本高。
我的选择标准是：需要交互（hover、click）和可访问性的用SVG；纯展示、元素数量极大（上千个）的用Canvas。文字特效一般元素不多，SVG是更合适的选择。
9.3 一个真实项目的技术决策复盘
之前做过一个活动页面，主标题需要"文字从火焰中浮现"的效果。最初方案是用Canvas逐帧绘制火焰粒子加文字遮罩，效果很炫但代码量巨大，而且移动端性能堪忧。
后来改成SVG方案：用feTurbulence滤镜生成火焰纹理，配合feDisplacementMap做扭曲，文字用mask控制浮现。代码量减少了70%，性能反而更好，因为SVG的滤镜是浏览器原生实现的，比JS逐帧绘制高效得多。
这个经历让我意识到：SVG的滤镜系统被严重低估了。feTurbulence、feDisplacementMap、feColorMatrix这些滤镜组合起来，能做出很多看起来需要WebGL才能实现的效果。值得花时间研究。
9.4 后续可以深入的方向
如果你已经把基础的文字特效玩熟了，接下来可以往这几个方向深入：一是SVG滤镜的进阶组合，做火焰、水波、玻璃质感；二是SVG与Web Animations API结合，用JS精确控制动画时间线；三是SVG文字与Three.js结合，把SVG作为纹理贴到3D物体上；四是研究<foreignObject>嵌入HTML做复杂排版。
我个人最近在琢磨的是SVG文字的路径变形动画，就是让文字的形状本身发生渐变，从一个字变成另一个字。这需要用到<path>的d属性插值，目前还没有特别成熟的方案，但已经有一些实验性的库在做这件事。等有稳定方案了再单独写一篇分享。
最后说个实在的：SVG文字特效的学习曲线不算陡，但细节特别多，每个属性都有坑。我的建议是别一次学太多，挑一个效果（比如描边动画）吃透，把相关的属性、兼容性、性能问题都摸清楚，再学下一个。贪多嚼不烂，这是我做了这么多年前端最深的体会。
