Javascript 嵌入的svg元素似乎打破了窗口。getSelection（）

我目前正在开发一个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');

$（“”+
"" +
"
现在看起来是这样的：

$("<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（）
不再返回所选文本，它始终返回页面上的最后一个文本节点。例如，在此页面上，无论我实际选择了什么，它始终选择页脚中的“rev 2016.4.28.3523”


我环顾四周，现在，我的工作假设是，SVG DOM的某些东西正在破坏
窗口。getSelection
正在查找选择，但我不知道这是否正确，如果是，如何修复它。有人知道发生了什么吗？
你试过阅读这篇文章吗？/@Xan背景标记是新的ES6 template文字（多行字符串）。我已经尝试过删除它们，但这并没有什么不同。请相信@taylorc93。@d.datul1990我已经看到了这些问题，但它们都没有解决我的问题