HTML5 - SVG Text Selection Bug in Chrome?

Question

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

Consider the following minimal example of SVG text crossed by 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 over 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 are dragging over text only, nothing is selected. But If you are dragging over text where a path is in the way (so, actually you are dragging over the path), the text is highlighted.

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

Is there some workaround I could use to prevent the text selection completely in all browsers?

Thanks in advance!

Answer 1

You can set the selection highlight color with a css pseudo selector.

svg text::selection { background: none; }

reference here.