如何在HTML中嵌入含文本的SVG并保留文本可选中搜索？

用<image>标签嵌入SVG时，浏览器会把它当作独立的外部资源，内部文本无法被选中或通过Ctrl+F搜索。要实现需求，你可以用以下几种替代方案：

1. 内联SVG代码 #

将SVG的完整代码直接插入HTML文档中，这样SVG里的文本会被浏览器识别为普通文本节点，天然支持选中和搜索：

<!-- 示例：直接嵌入SVG代码 -->
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">
  <text x="10" y="50" font-size="24">SVG内的可选中文本</text>
</svg>

2. 使用<object>标签引入 #

用<object>标签加载SVG文件，浏览器会解析SVG的内部结构，保留文本的可交互属性：

<object data="你的SVG文件路径.svg" type="image/svg+xml" width="400" height="100"></object>

3. 使用<iframe>标签（仅适合需要隔离上下文的场景） #

这种方式也能实现文本可选中，但会创建独立的浏览上下文，性能和轻便性不如<object>，非必要不推荐：

<iframe src="你的SVG文件路径.svg" width="400" height="100" frameborder="0"></iframe>

关键提示 #

• 确保你的SVG文件里的文本没有被转换为路径（比如设计软件导出时，要选择“保留文本对象”而非“轮廓化文本”）。
• 如果SVG文件来自跨域服务器，需要服务器配置CORS允许访问，否则<object>或<iframe>可能无法正常解析内部文本。

内容的提问来源于stack exchange，提问作者user171780