svg的标签通过精准坐标定位、渐变/图案填充、滤镜特效及富文本组合实现艺术字效果：x/y锚定基线起点，text-anchor与dominant-baseline控制对齐，fill引用渐变或图案，filter添加阴影/发光等，支持逐字样式与动画。
SVG 的 <text></text> 标签本身不直接生成“艺术字”，但它提供了比 HTML 文本更底层、更可控的图形化处理能力——把文字当路径来定位、变形、上色、蒙版、裁剪甚至动画。真正实现艺术化，靠的是组合使用它的定位属性、填充方式、滤镜和嵌套结构。
精准控制位置与对齐
HTML 中文字靠流式布局，SVG 中每个字都得“钉”在坐标上：
-
x/y 是基线起点，不是左上角。比如
<text x="100" y="200">你好</text>，实际是“你”字左下边缘落在 (100, 200) 点上； -
text-anchor 控制水平锚点：
start（默认，左对齐）、middle（居中）、end（右对齐）； -
dominant-baseline 决定垂直基准线：
hanging更适合中文字顶部对齐，ideographic贴近汉字字面框底部，middle按整体高度中心算； - 多字符可分别指定位置：
x="50 90 130"+y="150"，让每个字横排错落或纵向堆叠。
用渐变/图案填充替代纯色
直接设 fill 只能填单色。要艺术化，得绑定 SVG 渐变或图案：
- 先定义线性渐变：
<lineargradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#ff6b6b"></stop><stop offset="100%" stop-color="#4ecdc4"></stop></lineargradient>； - 再让文字用它：
<text fill="url(#grad)">渐变字</text>； - 还可填
<pattern></pattern>（如斜线、波点），甚至用<image></image>做纹理字（需注意 CORS）。
叠加滤镜增强视觉表现
SVG 滤镜（<filter></filter>）能做出阴影、模糊、发光、浮雕等效果，且比 CSS text-shadow 更精细：
- 投影：
<fedropshadow dx="2" dy="2" stddeviation="1" flood-color="#000" flood-opacity="0.5"></fedropshadow>； - 外发光：
<fegaussianblur in="SourceGraphic" stddeviation="3"></fegaussianblur>+<femerge></femerge>合并原图与模糊层； - 描边+填充分离：用
<femorphology></femorphology>膨胀轮廓再填充不同颜色，模拟双色描边字； - 应用时只需给
<text></text>加filter="url(#myFilter)"。
配合 <tspan></tspan> 实现富文本效果
<tspan></tspan> 是 <text></text> 的子元素，允许在同一行内混用样式、位置和变换：
- 逐字变色：
<text><tspan fill="#f00">红</tspan><tspan fill="#00f">蓝</tspan></text>； - 局部缩放：
<tspan transform="scale(1.3)">放大字</tspan>； - 错位排版：
<tspan dx="-5" dy="8">上移右偏</tspan>； - 还能嵌套进
<animatetransform></animatetransform>做独立动画，比如只让某个字旋转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
