本文详解为何 标签嵌入 SVG 会导致文本不可选，并提供使用 标签（含内联 Base64 方式）实现可高亮、可访问、可交互 SVG 文本的专业方案。
本文详解为何 `` 标签嵌入 svg 会导致文本不可选，并提供使用 `
在 Web 开发中，SVG 是矢量图形的理想选择，尤其当图形中包含语义化文本（如图表标签、说明文字或可读性要求高的 UI 元素）时，保持文本的可选性（selectable）、可复制性（copyable）、可访问性（accessible）和可缩放性（resolution-independent） 至关重要。然而，许多开发者发现：直接通过 
嵌入 SVG 后，页面中的文字无法被鼠标选中——即使原始 .svg 文件在浏览器独立打开时完全支持高亮。
根本原因在于： 标签将 SVG 视为位图等效的外部资源，浏览器会将其渲染为一个不可交互的图像对象（类似 PNG/JPEG），其内部 DOM 结构（包括
✅ 正确解法是使用 嵌入 SVG。它将 SVG 作为独立的 XML 文档加载并注入页面上下文，保留完整的 SVG DOM 树，使
以下是一个完整可运行示例：
<!-- ✅ 推荐：使用 <object> + Base64 内联（无额外 HTTP 请求，文本完全可选） --> <object data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNTAiPgogIDxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNTAiIGZpbGw9Im9yYW5nZSIgLz4KICA8dGV4dCB4PSI1MCIgeT0iMjUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IlN0ZWVsQmx1ZSI+SGVsbG8gV29ybGQhPC90ZXh0Pgo8L3N2Zz4=" width="300" height="150" aria-label="欢迎标语：Hello World！"> </object>
? 小技巧：Base64 编码可避免跨域或路径问题，适合小图标/简单图表；若 SVG 文件较大或需复用，也可使用外部路径：
⚠️ 注意事项：
- 不要用 ：虽能保持可选性，但会引入沙盒限制、样式隔离及额外滚动条，语义性和可访问性较差；
- 避免 ：直接将 SVG XML 写入 HTML 虽然天然可选，但会污染主文档结构，且外部 CSS/JS 难以安全作用于其中（需注意命名空间与作用域）；
-
务必添加 aria-label 或
：提升无障碍体验，尤其当 SVG 用于功能图标或关键信息展示时； - 测试兼容性：
- 禁用默认焦点轮廓？谨慎！ 若为纯装饰性 SVG，可通过 tabindex="-1" 移除键盘焦点，但功能性文本 SVG 应保留可聚焦能力。
总结：要让 SVG 文本“活”起来——可选、可复制、可访问、可样式化，请始终优先选用
