
svg 的 `
在 SVG 中沿路径(如圆形)渲染带格式的文本(例如“Made with ❤️ since 2023”,其中心形符号需独立强调或着色),常被误认为可通过 dangerouslySetInnerHTML +
正确做法是使用 SVG 原生的
✅ 关键要点: startOffset="50%" + textAnchor="middle" 可让文本居中对齐路径; 的 dx(相对 x 位移)比 x 更适合路径跟随场景,避免绝对定位冲突; 所有字符(包括 ❤️)均为 Unicode 字符,无需额外 HTML 标签,直接通过 fill 控制颜色; 若需更复杂样式(如下划线、不同字体),可为每个 添加 class 并在 CSS 中定义(如 .highlight { font-weight: bold; })。
⚠️ 注意事项:
仅适用于在 SVG 中嵌入完整 HTML 块(如 div + p + span),但它必须是 - React 中 href 属性需写为 href="#circle"(而非 xlink:href,后者已废弃);
- 路径过短或文本过长时,文字可能被截断,建议配合 lengthAdjust="spacingAndGlyphs" 和 textLength 属性做响应式适配(进阶用法);
- Emoji 渲染依赖系统字体支持,生产环境建议测试多端一致性,必要时可用 SVG
总结:SVG 是矢量图形规范,不是 HTML 渲染引擎。追求语义化与样式分离时,应拥抱 SVG 原生能力——用










