How to stop svg text from marking up

Question

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>

possible duplicate of [How to disable text selection highlighting](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting) or [Make SVG Text unselectable](https://stackoverflow.com/questions/34445147/make-svg-text-unselectable/34445741) — Jan Stránský, Sep 02 '20 at 09:16

score 1 · Accepted Answer · answered Sep 02 '20 at 08:38

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>

How to stop svg text from marking up

1 Answers1