How to stop svg text from marking up

user_13001684 0
Viewed 138

I want to block the user from marking the text with their mouse. (Like when it marks up when you want to copy and paste it).

<html>

  <body>
    <svg id='svg' xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
    </svg>
  </body>
  <script>
    var svg = document.getElementById('svg');
    var txt = document.createElementNS("http://www.w3.org/2000/svg", 'text');
    txt.textContent = 'name';
    txt.setAttribute('x', '100');
    txt.setAttribute('y', '100');
    txt.setAttribute('text-anchor', 'middle');
    svg.appendChild(txt);

  </script>

</html>

svg
1 Answers

You can set the user-select style to none to prevent that.

<html>

  <body>
    <svg id='svg' xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
    </svg>
  </body>
  <script>
    var svg = document.getElementById('svg');
    var txt = document.createElementNS("http://www.w3.org/2000/svg", 'text');
    txt.textContent = 'name';
    txt.setAttribute('x', '100');
    txt.setAttribute('y', '100');
    txt.setAttribute('text-anchor', 'middle');
    txt.style.userSelect = 'none';
    svg.appendChild(txt);

  </script>

</html>

user_10380150
Related