svg 的 `
在 SVG 中沿路径（如圆形）渲染带格式的文本（例如“Made with ❤️ since 2023”，其中心形符号需独立强调或着色），常被误认为可通过 dangerouslySetInnerHTML + <foreignObject> 实现。但这是无效的——<foreignObject> 不能作为 <textPath> 的子元素，且 <text> 和 <textPath> 本身不接受 HTML 解析，其内部只允许 SVG 文本内容（如 <tspan>、纯文本节点等）。浏览器会忽略非法嵌套，导致内容不可见。
正确做法是使用 SVG 原生的 <tspan> 元素进行分段布局。它支持 x、y、dx、dy、class、fill 等属性，可灵活控制每一段文字的位置、偏移和样式。例如：
<svg className="svg" viewBox="0 0 100 100" width="200" height="200">
{/* 定义圆形路径（不可见，仅作引导） */}
<path
id="circle"
d="M 50,50 m -40,0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0"
fill="none"
stroke="none"
/>
{/* 沿路径排布文本 */}
<text>
<textPath href="#circle" startOffset="50%" textAnchor="middle">
<tspan dx="-6em" fill="#333">Made with</tspan>
<tspan dx="0.2em" fill="#e74c3c">❤️</tspan>
<tspan dx="0.2em" fill="#333">since</tspan>
<tspan dx="0.2em" fill="#27ae60">2023</tspan>
</textPath>
</text>
</svg>✅ 关键要点： startOffset="50%" + textAnchor="middle" 可让文本居中对齐路径； <tspan> 的 dx（相对 x 位移）比 x 更适合路径跟随场景，避免绝对定位冲突； 所有字符（包括 ❤️）均为 Unicode 字符，无需额外 HTML 标签，直接通过 fill 控制颜色； 若需更复杂样式（如下划线、不同字体），可为每个 <tspan> 添加 class 并在 CSS 中定义（如 .highlight { font-weight: bold; }）。
⚠️ 注意事项：
- <foreignObject> 仅适用于在 SVG 中嵌入完整 HTML 块（如 div + p + span），但它必须是 <svg> 的直接子元素，且不能出现在 <text> 或 <textPath> 内部；
- React 中 href 属性需写为 href="#circle"（而非 xlink:href，后者已废弃）；
- 路径过短或文本过长时，文字可能被截断，建议配合 lengthAdjust="spacingAndGlyphs" 和 textLength 属性做响应式适配（进阶用法）；
- Emoji 渲染依赖系统字体支持，生产环境建议测试多端一致性，必要时可用 SVG <use> 引入图标 symbol 替代。
总结：SVG 是矢量图形规范，不是 HTML 渲染引擎。追求语义化与样式分离时，应拥抱 SVG 原生能力——用 <tspan> 替代 <span>，用 fill/font-family 替代 style，用 dx/dy 替代 margin。这样既保持性能与兼容性，又真正发挥 SVG 沿路径文本的优雅表现力。
