1

I have a simple pair of SVG circles that I want to use as buttons (see below). For some reason the browser is inserting what seems to be a nonbreaking space between them, such that when clicking one of the buttons, if I drag the mouse slightly before releasing the button, I accidentally select the blank space between the two circles and that space becomes highlighted. This happens in both Chrome and Edge, although for whatever reason the apparent font size of the nonbreaking space is larger in Chrome.

Is there an elegant way to get rid of this? Failing that, is there a kludge to get around it?

Thanks.

.rotated {
  transform-origin: 50% 50%;
  transform: rotate(45deg);
}
<svg width="36pt" height="36pt">
   <g onclick="console.log('Delete!');">
    <circle cx="50%" cy="50%" r="45%" stroke="black" stroke-width="1" fill="white"></circle>
   </g>
   <g><line x1="50%" y1="25%" x2="50%" y2="75%" style="stroke:black; stroke-width:1" class="rotated"/></g>
   <g><line x1="25%" y1="50%" x2="75%" y2="50%" style="stroke:black; stroke-width:1" class="rotated"/></g>
  </svg>

<!-- MYSTERIOUS SPACE APPEARS HERE! -->

<svg width="36pt" height="36pt">
   <g onclick="console.log('Save!');">
    <circle cx="50%" cy="50%" r="45%" stroke="black" stroke-width="1" fill="white"></circle>
   </g>
   <g><line x1="30%" y1="60%" x2="35%" y2="75%" style="stroke:black; stroke-width:1"/></g>
   <g><line x1="35%" y1="75%" x2="75%" y2="30%" style="stroke:black; stroke-width:1"/></g>
  </svg>
Basil
  • 1,613
  • 12
  • 25
DrakeDun
  • 13
  • 3
  • 1
    the below answer will simply hide the issue without fixing it. You need to get rid of that space instead of disabling the selection – Temani Afif Jan 21 '20 at 10:12

1 Answers1

1

To remove the text highlighting on selection you can use the following css:

-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all             */
-ms-user-select: none;
/* Internet Explorer  10+  */
user-select: none;
/* Likely future           */


.rotated {
  transform-origin: 50% 50%;
  transform: rotate(45deg);
}

.content {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all             */
  -ms-user-select: none;
  /* Internet Explorer  10+  */
  user-select: none;
  /* Likely future           */
}
<div class="content">
  <svg width="36pt" height="36pt">
   <g onclick="console.log('Delete!');">
    <circle cx="50%" cy="50%" r="45%" stroke="black" stroke-width="1" fill="white"></circle>
   </g>
   <g><line x1="50%" y1="25%" x2="50%" y2="75%" style="stroke:black; stroke-width:1" class="rotated"/></g>
   <g><line x1="25%" y1="50%" x2="75%" y2="50%" style="stroke:black; stroke-width:1" class="rotated"/></g>
  </svg>

  <!-- MYSTERIOUS SPACE APPEARS HERE! -->

  <svg width="36pt" height="36pt">
   <g onclick="console.log('Save!');">
    <circle cx="50%" cy="50%" r="45%" stroke="black" stroke-width="1" fill="white"></circle>
   </g>
   <g><line x1="30%" y1="60%" x2="35%" y2="75%" style="stroke:black; stroke-width:1"/></g>
   <g><line x1="35%" y1="75%" x2="75%" y2="30%" style="stroke:black; stroke-width:1"/></g>
  </svg>
</div>
Basil
  • 1,613
  • 12
  • 25