Как я могу щелкнуть тег строки SVG, имеющий больше границ? - PullRequest
Новая
       4

Как я могу щелкнуть тег строки SVG, имеющий больше границ?

1 голос
/ 24 марта 2020

Я каждый день благодаря отвечая разработчику. Как я могу щелкнуть тег строки svg, имеющий больше границ?

Это мой тег строки. enter image description here

Я хочу щелкнуть границу тега ling. enter image description here

  <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>

Как я могу щелкнуть границы событий, заданные подробнее?

1 Ответ

1 голос
/ 24 марта 2020

Добавьте вторую более широкую невидимую линию поверх первой, захватывайте ее щелчки и отправляйте их на видимую линию внизу. 

  <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...