Skip to content

Instantly share code, notes, and snippets.

@23maverick23

23maverick23/svg_text_select.css

Created January 3, 2015 13:41
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save 23maverick23/64b3b587c88697558fac to your computer and use it in GitHub Desktop.
Save 23maverick23/64b3b587c88697558fac to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Disable text selection in SVG elements
Raw
svg_text_select.css
svg text {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
svg text::selection {
background: none;
}
@ravindra1985
Copy link

Very helpful, thankQ

@aschrijver
Copy link

Do you also know how to suppress on Android?

I have:

      svg text {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
      }

and when I trigger the onclick event on an elipse, the text selection indicators appear with the 'Select All' balloon above it..

@quentindemetz
Copy link

I have found that putting event.preventDefault() in the onclick callback fixes this behavior

@ryantan
Copy link

ryantan commented Oct 20, 2018

I had to add

pointer-events: none;

@taiwanhua
Copy link

svg text {
fill: "transparent"
}
svg text::selection {
fill: "transparent"
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment