浏览器选中含SVG段落按Ctrl+C复制时自定义SVG对应文本的方法

问题说明 #

现有代码片段如下：

<p>This is a <svg class="inline"><use href="#my-rect"></use></svg>!</p>

其中#my-rect是外观渲染为矩形框的<g>元素，需求为用户选中整个段落按下Ctrl+C复制时，剪贴板最终文本为This is a rect!，经测试给SVG设置title属性无法实现该效果。

方案1：无JS兼容方案（推荐） #

浏览器原生的文本选择、复制逻辑只会识别正常参与布局、没有被display: none/visibility: hidden排除的文本节点。SVG的<title>元素仅用于鼠标悬浮提示，属于元数据内容，不会被纳入可复制文本范围，因此无效。
你可以在SVG内部加入一个视觉上完全隐藏、但能被文本选择逻辑识别的文本节点，同时搭配无障碍属性保证读屏器兼容：

<p>This is a 
  <svg class="inline" role="img" aria-label="rect">
    <!-- 可被复制逻辑识别的隐藏文本 -->
    <text class="visually-hidden" x="0" y="0">rect</text>
    <use href="#my-rect"></use>
  </svg>!
</p>

配套的视觉隐藏CSS：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

这个方案不需要额外编写JavaScript，选中段落时浏览器会自动把隐藏的rect文本纳入选择范围，复制后就能得到预期内容，同时完全不会影响SVG的视觉显示效果。

方案2：监听复制事件兜底 #

如果不想调整DOM结构，可以直接监听段落的复制事件，手动拼接写入剪贴板的内容：

const paragraph = document.querySelector('p');
const targetSvg = paragraph.querySelector('svg.inline');

paragraph.addEventListener('copy', (e) => {
  const selection = window.getSelection();
  // 判断当前选中范围是否包含目标SVG
  if (selection.containsNode(targetSvg, true)) {
    // 原生复制时SVG位置会被识别为空字符，直接替换为目标文本
    e.clipboardData.setData('text/plain', 'This is a rect!');
    e.preventDefault();
  }
});

这个方案可控性更高，但需要手动处理选中范围的边界判断，适合存在复杂交互的场景使用。

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