嵌入式svg元素似乎打破了window.getSelection（）

Question

我目前正在开发Chrome扩展程序。这是一个简单的插件，可以在选定的文本上显示弹出窗口。有一段时间，我正在使用png图像作为popover内部的图标，window.getSelection()获取用户选择的文本。现在，我想为图标使用嵌入式svg元素。以前，我的图标是这样嵌入的：

$("<div id='hili-wrapper'>" +
    "<div id='hili-popover-inner'>" +
    "<img id='hilimg'></img>" +
    "</div>" +
    "</div>"
).appendTo('body');

var imgURL = chrome.extension.getURL("img/white.png");
document.getElementById("hilimg").src = imgURL;

现在看起来像这样：

$("<div id='hili-wrapper'>" +
    "<div id='hili-popover-inner'>" +
    `<svg version="1.1"
         id="noted-icon"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         viewBox="0 0 165 165" style="enable-background:new 0 0 163.3 164.9;"
         xml:space="preserve">
      <path d="M161.8,57.1l-2.4-1.9c-0.2-0.2-0.4-0.3-0.6-0.4l-6.9-5.5l7.1-8.8c0.8-1,1.2-2.4,1.1-3.7c-0.1-1.3-0.8-2.5-1.8-3.4L118.1,1.1
        c-2.2-1.7-5.3-1.4-7,0.8L19,116.4c-0.8,1-1.2,2.4-1.1,3.7c0.1,1.3,0.8,2.5,1.8,3.4l4.9,3.9L1.1,156.5c-1.2,1.5-1.4,3.5-0.6,5.3
        c0.8,1.7,2.6,2.8,4.5,2.9l37,0.3c0,0,0,0,0,0c1.5,0,2.9-0.7,3.9-1.9l9.1-11.3l4.9,3.9c0.9,0.7,2,1.1,3.1,1.1c1.5,0,2.9-0.6,3.9-1.9
        L145,57.9l4.3,3.5l-35.4,44c-1.4,1.7-1.1,4.2,0.6,5.6l2.4,1.9c1.7,1.4,4.2,1.1,5.6-0.6l39.9-49.6C163.8,61,163.5,58.5,161.8,57.1z
         M39.6,154.9l-24.2-0.2l17-21.2l4,3.2l10.8,8.7L39.6,154.9z M62.2,144.8l-32.3-26l62.7-78l32.3,26L62.2,144.8z M99.6,32.1L115.7,12
        l32.3,26l-16.2,20.1L99.6,32.1z"/>
      </svg>` +
    "</div>" +
    "</div>"
).appendTo('body');

更改此项（仅此项）后，window.getSelection()不再返回所选文本，它始终返回页面上的最后一个文本节点。例如，在此页面上How to change color of SVG image using CSS (jQuery SVG image replacement)?，它总是选择“rev 2016.4.28.3523”，这是在页脚中，无论我实际选择什么

我现在环顾四周，我的工作假设是SVG DOM的某些内容与window.getSelection如何找到选择有关，但我不知道这是否正确以及如何修复它我是。任何人都知道发生了什么事？