当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Embedded svg element seems to break window.getSelection()

问题描述:

I'm currently working on a chrome extension. It's a simple plugin that displays a popover over selected text. For a while, I was using a png image for the icon inside of the popover and window.getSelection() to get the text the user selected. Now, I'd like to use an embedded svg element for the icon. Before, my icon was embedded like this:

$("<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;

And now, it looks like this:

$("<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');

After changing this (and only this), window.getSelection() no longer returns the selected text, it always returns the last text node on the page. For example, while on this page: How to change color of SVG image using CSS (jQuery SVG image replacement)?, it always chooses "rev 2016.4.28.3523", which is in the footer, no matter what I actually select

I've looked around and right now, my working assumption is that something with the SVG DOM is screwing with how window.getSelection is finding the selection, but I have no idea if that's right and how to fix it if I am. Anyone have an idea what's going on?

分享给朋友:
您可能感兴趣的文章:
随机阅读: