How can I click svg line tag having more boundaries?

Question

I'm every day thanks to answering developer. How can I click svg line tag having more boundaries?

This is my line tag.

This is I want click ling tag boundary.

  <body>
    <svg height="210" width="500">
      <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
          <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
          <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
      </defs>
      <line
        x1="0"
        y1="0"
        x2="200"
        y2="200"
        style="stroke:rgb(255,0,0);stroke-width:5;box-shadow: 10px 5px 5px red;"
      ></line>
    </svg>
  </body>
  <script>
    document
      .getElementsByTagName("line")[0]
      .addEventListener("click", function(e) {
        console.log("lineClick", e);
      });
  </script>

How Can I click event boundary set more?

Answer 1

Add a second wider invisible line on top of the first, capture its clicks and dispatch them to the visible line underneath.

 <body> <svg height="210" width="500"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5;box-shadow: 10px 5px 5px red;" ></line> <line onclick="document .getElementsByTagName('line')[0].dispatchEvent(new Event('click'));" x1="0" y1="0" x2="200" y2="200" style="stroke:none;stroke-width:40;pointer-events:all;cursor:pointer" ></line> </svg> </body> <script> document .getElementsByTagName("line")[0] .addEventListener("click", function(e) { console.log("lineClick", e); }); </script>

How can I click svg line tag having more boundaries?

Question

1 answers

solution1
1 ACCPTED 2020-03-24 06:32:43

How can I click svg line tag having more boundaries?

Question

1 answers

solution1 1 ACCPTED 2020-03-24 06:32:43

solution1
1 ACCPTED 2020-03-24 06:32:43