Does anyone know how to disable a SVG using JavaScript?

Question

I've been trying to use something in JS like:

getElementById("dartboard").style.pointer-events = "none";

However, this does not work and the = has a red underline. Any ideas?

https://stackoverflow.com/questions/15241915/how-to-change-css-property-using-javascript — ceving, Jun 14 '22 at 07:42

score 0 · Accepted Answer · answered Jun 14 '22 at 16:31

Attribute names need to written in camelCase like so:

pointer-events => pointerEvents

<svg id="dartboard" width="100px" height="100px" viewBox="0 0 100 100">
  <circle cx="50%" cy="50%" r="25%" fill="red" stroke="green"/>
</svg>

<script>
  let dartboard = document.getElementById("dartboard");
  dartboard.addEventListener('click', function(e) {
    alert('click');
  })

  dartboard.style.strokeWidth = 10;
  dartboard.style.pointerEvents = "none";
</script>

score -1 · Answer 2 · answered Jun 14 '22 at 07:45

-1

You can change the css properties from javascript, as it is described here: https://www.w3schools.com/js/js_htmldom_css.asp

var obj = document.getElementById("container");
obj.style.pointer-events = "none";

answered Jun 14 '22 at 07:45

mngs

11
6

when I use this code the = has a red line underneath it and the code won't work – Ferg Jun 14 '22 at 07:50

Does anyone know how to disable a SVG using JavaScript?

2 Answers2