HTML5 - Error choosing SVG text in Chrome?

Question

I am developing a web application in HTML5 using SVG to draw paths and text. Testing with Chrome on OS X, I came across pretty ugly behavior that seems to be a bug in Chrome.

Consider the following minimal example of an SVG text traversed along a path:

<svg height="200" width="200"> <text x="50" y="50" fill="#000" font-size="50" style="pointer-events: none;"> <tspan x="5" dy="0">Test Text</tspan> </text> <path d="M 0 0 L 100 100" stroke="#000" stroke-width="5"></path> </svg> 

( http://jsfiddle.net/wPYvS/ )

I don’t want the SVG text to be selected (or highlighted) when dragging it with the cursor. So I added the CSS attribute "pointer-events: none", which works as expected in all browsers except Chrome. In Chrome, when you drag only text, nothing is selected. But if you drag the text where the path is on the path (so you are actually dragging the path), the text is highlighted.

I was able to reproduce this on Chrome and OS X and Windows, but not with Firefox, Opera, or Safari.

Is there some workaround that I could use to prevent full text selection in all browsers?

Thanks in advance!

Answer 1

You can set the highlight color using the css pseudo selector.

 svg text::selection { background: none; } 

link here .

Answer 2

::selection is useful to style highlight color using the background and color . Bye ::selection { background: none; } ::selection { background: none; } works, the selection is still on, but "masked" without a background color.

The proper way to actually disable selection is to use user-select: none .

 #div, .class { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ } 

Link here .
Your JSFiddle has been updated .