javascript - Make overlapping html and svg based elements respond to click event

Question

Is there a way to make both the html based div and the SVG based line in the snippet below respond to javascript?

I know of the pointer-events css property. But it seems to be all or nothing to me - I want both elements to respond to events ...

#main {
  position: relative;
  width: 600px;
}

svg {
  border: 1px solid blue;
  red;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  stroke: rgb(155, 155, 155);
  stroke-width: 10
}

#box-container {
  display: flex;
}

.box {
  width: 200px;
  background-color: pink;
  height: 100px;
}

<div>
  <p>
    Html based boxes should be clickable
  </p>
  <p>
    SVG based line should be clickable
  </p>
</div>
<div id="main">
  <svg>
    <line onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
  </svg>
  <div style="display:flex;">
    <div onClick="alert('one')" class="box">
      One
    </div>
    <div onClick="alert('two')" style="margin-left:auto" class="box">
      Two
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65938030/make-overlapping-html-and-svg-based-elements-respond-to-click-event

Answer 1

#main {
  position: relative;
  width: 600px;
}

svg {
  border: 1px solid blue;
  red;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  stroke: rgb(155, 155, 155);
  stroke-width: 10
}

#box-container {
  display: flex;
}

.box {
  width: 200px;
  background-color: pink;
  height: 100px;
}

<div>
  <p>
    Html based boxes should be clickable
  </p>
  <p>
    SVG based line should be clickable
  </p>
</div>
<div id="main">
  <svg>
    <line style="pointer-events:all;" onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
  </svg>
  <div style="display:flex;">
    <div onClick="alert('one')" class="box">
      One
    </div>
    <div onClick="alert('two')" style="margin-left:auto" class="box">
      Two
    </div>
  </div>
</div>