JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap1">
  <div class="item">
    <label for="pointer-events">pointer-events = </label>
    <select id="pointer-events" class="select">
      <option value="auto" selected>auto</option>
      <option value="none">none</option>
      <option value="fill">fill</option>
      <option value="stroke">stroke</option>
      <option value="all">all</option>
      <option value="painted">painted</option>
      <option value="visible">visible</option>
      <option value="visibleFill">visibleFill</option>
      <option value="visibleStroke">visibleStroke</option>
      <option value="visiblePainted">visiblePainted</option>
    </select>
  </div>
  <div class="item">
    <label for="visibility">visibility = </label>
    <select id="visibility" class="select">
      <option value="visible" selected>visible</option>
      <option value="hidden">hidden</option>
    </select>
  </div>
  <div class="item">
    <label for="opacity">opacity = </label>
    <select id="opacity" class="select">
      <option value="1" selected>1</option>
      <option value="0">0</option>
      <option value="0.5">0.5</option>
    </select>
  </div>
</div>

<div class="wrap2">
  <div class="item">
    <p>fillとstrokeも色</p>
    <svg viewBox="0 0 100 75" class="svg">
      <path fill="#A3C5C6" stroke="#2A4387" stroke-width="10" d="M3.3,37C16.2,24.1,38,20,50,37s33.8,12.9,46.7,0"/>
    </svg>
  </div>
  <div class="item">
    <p>fill=none</p>
    <svg viewBox="0 0 100 75" class="svg">
      <path fill="none" stroke="#2A4387" stroke-width="10" d="M3.3,37C16.2,24.1,38,20,50,37s33.8,12.9,46.7,0"/>
    </svg>
  </div>
  <div class="item">
    <p>stroke=none</p>
    <svg viewBox="0 0 100 75" class="svg">
      <path fill="#A3C5C6" stroke="none" stroke-width="10" d="M3.3,37C16.2,24.1,38,20,50,37s33.8,12.9,46.7,0"/>
    </svg>
  </div>
  <div class="item">
    <p>fill=stroke=none</p>
    <svg viewBox="0 0 100 75" class="svg">
      <path fill="none" stroke="none" stroke-width="10"...

CSS

.wrap1, .wrap2 {display: flex}
.wrap2 {margin-top: 1rem;border: 1px solid rgba(0,0,0, 0.3)}
.wrap1 .item {display: flex;align-items: center}
.wrap1 select {margin-left: 0.5em}
.item {padding: 0 10px}
.item + .item {border-left: 1px solid rgba(0,0,0, 0.3)}
.wrap2 .item {width: 25%}
.svg {border: 1px solid rgba(0,0,0, 0.3)}
#output {margin-top: 1rem;border: 1px solid rgba(0,0,0, 0.3); height: 1.5rem;background-color: gold}

JavaScript

const $svg = document.querySelectorAll('.svg');
const $select_pe = document.querySelector('#pe');
const $select_op = document.querySelector('#op');
const $select_vi = document.querySelector('#vi');
const $select = document.querySelectorAll('.select');
const $output = document.querySelector('#output');
let timer = null;

const svgToggleAttribute = (name, value) => {
  [].forEach.call($svg, ($_svg) => {
    $_svg.setAttribute(name, value);
  });
}

[].forEach.call($select, ($_select) => {
  $_select.addEventListener('change', (e) => {
    let name = e.target.id;
    let value = e.target.value;
    svgToggleAttribute(name, value);
  });
});

[].forEach.call($svg, ($_svg) => {
  $_svg.addEventListener('click', (e) => {
    $output.textContent = 'clicked!';
    timer = setTimeout(() => {
      clearTimeout(timer);
      $output.textContent = '';
    }, 750);
  });
});