Created
January 3, 2015 13:41
-
-
Save 23maverick23/64b3b587c88697558fac to your computer and use it in GitHub Desktop.
CSS: Disable text selection in SVG elements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
svg text { | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
svg text::selection { | |
background: none; | |
} |
My SVG elements are dynamically generated, the user-select is Inline Style.
i use Svg.snap.js .
I set pointer-events:none, still doesn't work.
Very helpful, thankQ
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..
I have found that putting event.preventDefault()
in the onclick
callback fixes this behavior
I had to add
pointer-events: none;
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
very helpful, I've added this small change
svg text {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}