How to create responsive click events for overlapping HTML and SVG elements

Question

How to create responsive click events for overlapping HTML and SVG elements

Can the html based div and the SVG based line in the code snippet below both be made interactive with javascript?

I am familiar with the pointer-events css property. However, it seems to apply globally - I want both elements to be responsive individually...

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

javascript html css svg

Answer 1

Answer №1

<div id=”container”>
  <p>Click on the HTML boxes to interact.</p>
  <p>The SVG line is also clickable.</p>
</div>

<div id=”main”>
  <svg>
    <line style=”cursor:pointer;” onClick=”alert('SVG line clicked')” x1=”0” y1=”0” x2=”600” y2=”100” />
  </svg>

  <div style=”display:flex;”>
    <div onClick=”alert('Box one clicked')” class=”box”>
      Box One
    </div>
    <div onClick=”alert('Box two clicked')” class=”box”>
      Box Two
    </div>
  </div>
</div>

Answer 2

<div id=”container”>
  <p>Click on the HTML boxes to interact.</p>
  <p>The SVG line is also clickable.</p>
</div>

<div id=”main”>
  <svg>
    <line style=”cursor:pointer;” onClick=”alert('SVG line clicked')” x1=”0” y1=”0” x2=”600” y2=”100” />
  </svg>

  <div style=”display:flex;”>
    <div onClick=”alert('Box one clicked')” class=”box”>
      Box One
    </div>
    <div onClick=”alert('Box two clicked')” class=”box”>
      Box Two
    </div>
  </div>
</div>

Answer 3

Answer №2

Unfortunately, there is no direct way to achieve this. However, you can simulate a click event on another element using the following method.

function lineClick() {
  alert('line')
  document.querySelector("#one").click()
}

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

svg {
  border: 1px solid blue;
  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="lineClick()" x1="0" y1="0" x2="600" y2="100" />
  </svg>
  <div style="display:flex;">
    <div onClick="alert('one')" class="box" id="one">
      One
    </div>
    <div onClick="alert('two')" style="margin-left:auto" class="box">
      Two
    </div>
  </div>
</div>

Answer 4

Unfortunately, there is no direct way to achieve this. However, you can simulate a click event on another element using the following method.

function lineClick() {
  alert('line')
  document.querySelector("#one").click()
}

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

svg {
  border: 1px solid blue;
  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="lineClick()" x1="0" y1="0" x2="600" y2="100" />
  </svg>
  <div style="display:flex;">
    <div onClick="alert('one')" class="box" id="one">
      One
    </div>
    <div onClick="alert('two')" style="margin-left:auto" class="box">
      Two
    </div>
  </div>
</div>

Answer 5

Answer №3

To make the SVG not respond to mouse events, you can use svg{pointer-events:none}. For the line to respond to mouse events, you should use line{pointer-events:all}. If you want both the one and the line to respond to the same event, refer to @dgknca's solution.

#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;
  pointer-events:none;
}

line{pointer-events:all;}

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

Answer 6

To make the SVG not respond to mouse events, you can use svg{pointer-events:none}. For the line to respond to mouse events, you should use line{pointer-events:all}. If you want both the one and the line to respond to the same event, refer to @dgknca's solution.

#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;
  pointer-events:none;
}

line{pointer-events:all;}

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

Answer 7

Answer №4

To streamline event handling, consider using the elementsFromPoint(x,y) method for a unified delegation approach.

<script>
  function clickHandler(evt) {
    // Retrieve all elements at the specified X,Y coordinates
    let elements = document.elementsFromPoint(evt.clientX, evt.clientY);
    // Exclude the SVG element from consideration
    let element = elements[(elements[0].nodeName == "svg") ? 1 : 0];
    console.log(elements);
    console.log(element);
  }
</script>
<style>
  #main {
    position: relative;
    width: 600px;
  }
  svg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    stroke: green;
    stroke-width: 10
  }
  .box {
    width: 200px;
    background-color: pink;
    height: 100px;
  }
</style>
<div id="main" onclick="clickHandler(event)">
  <svg>
    <line x1="0" y1="0" x2="600" y2="100" />
  </svg>
  <div style="display:flex;">
    <div class="box" id=ONE>
      One
    </div>
    <div style="margin-left:auto" class="box" id=TWO>
      Two
    </div>
  </div>
</div>

Answer 8

To streamline event handling, consider using the elementsFromPoint(x,y) method for a unified delegation approach.

<script>
  function clickHandler(evt) {
    // Retrieve all elements at the specified X,Y coordinates
    let elements = document.elementsFromPoint(evt.clientX, evt.clientY);
    // Exclude the SVG element from consideration
    let element = elements[(elements[0].nodeName == "svg") ? 1 : 0];
    console.log(elements);
    console.log(element);
  }
</script>
<style>
  #main {
    position: relative;
    width: 600px;
  }
  svg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    stroke: green;
    stroke-width: 10
  }
  .box {
    width: 200px;
    background-color: pink;
    height: 100px;
  }
</style>
<div id="main" onclick="clickHandler(event)">
  <svg>
    <line x1="0" y1="0" x2="600" y2="100" />
  </svg>
  <div style="display:flex;">
    <div class="box" id=ONE>
      One
    </div>
    <div style="margin-left:auto" class="box" id=TWO>
      Two
    </div>
  </div>
</div>

How to create responsive click events for overlapping HTML and SVG elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for patiently anticipating an object to undergo asynchronous modifications?

Order comments based on their category using vue.js

How can I create a CSS div with a 20px margin-top distance from the div directly above

Explore the new feature in React Vis LineMarkSeries where you can customize the style property to have distinct stroke and fill

"Unlocking the secret to retrieving the initial text inputted into a textbox using jQuery's on

Steps to convert a subelement into a string

Implementing react router functionality with Material-UI tabs

What is the best way to make "inline-block" elements move to a new line when needed?

Optimizing CSS usage within Django: top recommendations

Exploring the possibilities of applying a fragmentShader texture to repeat a ThreeJS Matcap

Creating a custom design for multiple data-tooltips

Ability to utilize an alternative attribute type within a TypeScript object

Setting up a recurring task with a while loop in a cron job

establishing a minimum number of characters in a regular expression enclosed in parentheses

The React initialization and construction process leads to excessive memory consumption

What is the best way to ensure a div spans the entire width of the screen?

Inform the user that an error has occurred when attempting to perform an invalid

Switch out button with AngularJS post request

Opt for a line break over a semicolon when using jQuery

Retrieving data from several checkboxes in AngularJS