SVG 文本处理

SVG 提供了强大的文本处理能力，支持样式化、路径文本和多行文本。

基础文本

                <text x="150" y="75" text-anchor="middle" fill="var(--primary)" font-size="24"> Hello SVG!
                  </text>
              

路径文本

                <text> <textPath href="#curve" startOffset="50%" text-anchor="middle"> 沿着曲线的文本
                  </textPath> </text>
              

多行文本 (tspan)

                <text x="150" y="50" text-anchor="middle"> <tspan x="150" dy="0"
                  font-size="24">标题</tspan> <tspan x="150" dy="30" font-size="16">副标题</tspan>
                  </text>
              

描边文本

                <text fill="none" stroke="var(--primary)" stroke-width="2" font-size="36"> STROKE
                  </text>
              

渐变文本

                <linearGradient id="grad"> <stop offset="0%" stop-color="#10b981"/> <stop
                  offset="100%" stop-color="#8b5cf6"/> </linearGradient> <text
                  fill="url(#grad)">GRADIENT</text>
              

阴影文本

                <filter id="shadow"> <feGaussianBlur stdDeviation="3"/> <feOffset dx="2" dy="2"/>
                  </filter> <text filter="url(#shadow)">SHADOW</text>
              

💡 关键知识点

x, y: 文本的起始位置坐标
text-anchor: 文本对齐方式（start, middle, end）
textPath: 让文本沿着路径排列
tspan: 在文本中创建子元素，实现多行和样式变化
dy: 相对于前一个字符的垂直偏移
dx: 相对于前一个字符的水平偏移
startOffset: 文本在路径上的起始位置（百分比或长度）
文本可以应用填充、描边、渐变和滤镜效果