title: Make SVG Text unselectable
body: <p>I have a svg with some text</p>
  
  <p><strong>EDIT: This is all the elements on my svg in order to accomplish the effect I need</strong></p>
  
  <pre><code>&lt;g id="top"&gt;
  &lt;path ....&gt;
  &lt;/g&gt;
  &lt;g id="bottom"&gt;
  &lt;path ....&gt;
  &lt;/g&gt;
  &lt;g id="boxes"&gt;
  &lt;rect ....&gt;
  &lt;/g&gt;
  &lt;g id="txt"&gt;
  &lt;text transform="matrix(1 0 0 1 50 30)" class="svgtxt"&gt;TEXT&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>Currently if I hover the mouse over the "TEXT" word I am able to select it.</p>
  
  <p>I am trying to find a way to make it not to be selectable, using CSS, JQuery (as follows) but nothing seems to work. I could not find anything similar either.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.svgtxt{
    -webkit-touch-callout: none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
  }
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('#txt text').onmousedown = function() { return false; };
  </code></pre>
  
  <p>Any ideas? </p>
  
  <p>Thanks in advance.</p>