Issue encountered with mouse handling on SVG elements that overlap is not functioning as anticipated

I am working with multiple SVG path elements, each contained within a parent SVG element, structured like this:

<svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>

<svg style="position:absolute;left:277.5px;top:109px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="108.5px" width="410.015625px">
  <path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>

The issue I am facing is that the SVG elements and their child paths are visually overlapping.

To incorporate a hover effect, I have set up mouseenter and mouseleave events on each of the paths.

While the hover effect works as expected when the mouse is over areas that do not overlap, it fails to trigger correctly when the mouse is positioned on areas where the bounding rectangles of the SVG elements overlap.

However, when I combine the same two path elements into a single SVG, like shown below, the hover effect functions as expected even where the bounding rectangles overlap.

<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

  <path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>
</svg>

JSFiddle

For a demonstration of these two cases, you can visit this JSFiddle. In this example, the red lines are in separate SVG elements, while the green lines are within a single SVG element. The green lines exhibit the desired behavior, unlike the red lines.

Notes

  • The discrepancy in appearance of the paths is simply due to the different "top" attributes assigned to the two SVG elements in the initial example.

  • Although some similar queries suggest setting pointer-events, I believe I have configured them correctly (none on the SVG element, and visibleStroke on the paths).

Question

Is there a way to ensure that the mouse handling in the initial scenario, where two SVG elements are used, functions the same as when a single SVG element is employed?

javascriptsvgpathhovermouse

Answer №1

By adding the attribute pointer-events="none" to the svg element at the top, I found success in at least using Firefox. The correct syntax is crucial (use = instead of :). Here is an example...

<svg class="connector" style="position:absolute;left:277.5px;top:65px" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>

<svg style="position:absolute;left:277.5px;top:109px;" pointer-events="none" height="108.5px" width="410.015625px>
  <path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>

<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

  <path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging VueJS 2.0 server-side rendering: Maximizing data retrieval efficiency with preFetch and beforeRouteEnter techniques

Exploring VueJS server-side rendering and troubleshooting some issues. Using the latest VueJS Hackernews 2.0 as a starting point for this project. Currently facing an obstacle: The server fetches data using the preFetch method. All seems well. When a use ...

javascriptvuejs2vue.jsserver-side-rendering

Merging the outcomes of a JSON call

Presently, I have an async function that returns a JSON response in the form of an array containing two objects. Please refer to the screenshot. https://i.sstatic.net/gCP8p.png How can I merge these objects to obtain: [{resultCount: 100, results: Array(1 ...

javascriptarraysjsonjavascript-objects

Is there a way to load a URL within a DIV element using AJAX?

These two PHP files are set up to capture a user's input from a form and then display that text. Below you'll find the code for each file: file1.php: <form action="output.php" method="post"> Paste text document: <br> ...

javascriptphpajax

Understanding the proper way to enclose JSX components and exhibit JSON based on user input

I'm currently working on a university administration website using React that needs to support multiple languages. I have successfully built the Login page, which you can see here: https://i.stack.imgur.com/cIiaU.png Now, my next task is to allow us ...

javascriptjsonreactjsjsxbabeljs

Retrieve data points from ol.layer.Vector using OpenLayers 4

Having recently started using OpenLayers, I find myself in a state of confusion. I'm attempting to retrieve all features from a kml vector layer, but have been unsuccessful thus far. It perplexes me as to what mistake I might be making. Below is the ...

javascriptopenlayers

Setting up a custom global variable in nuxt.js using vuetify

As I work on developing my app with Nuxt, I find myself frustrated by the need to constantly write an if statement in my pages using this.$Vuetify.breakpoint.name == 'xs' for handling responsiveness. Instead, I want to create my own variable for ...

javascriptvue.jsnuxt.jsvuetify.js

I aim to conceal the Spinner feature within the service layer of Vue JS

I have a basic bootstrap Spinner.vue component <template> <div class="modal" v-if="start"> <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;" ...

javascriptvue.js

Is it possible to use a server action in Next.js to both retrieve data and refresh the page?

I am currently working on developing a web application using Next.js (13.4.9) and I intend to utilize server actions. These server actions will involve sending data to the server, which will process the data and return a string back to me. The challenge I& ...

javascriptnext.js

Deep Dive into TypeScript String Literal Types

Trying to find a solution for implementing TSDocs with a string literal type declaration in TypeScript. For instance: type InputType = /** Comment should also appear for num1 */ 'num1' | /** Would like the TSDoc to be visible for num2 as well ...

javascripttypescripttypes

What exactly does the term "new.target" refer to?

The ECMAScript 2015 specification references the term new.target a total of three times - once in section 14.2.3: Although Contains typically does not analyze most function forms, it is specifically used to identify new.target, this, and super usage wit ...

javascriptecmascript-6

Issues with rendering in Next.jsORErrors encountered during rendering

Encountering errors while attempting to build my page using "Yarn Build" Automatically optimizing pages ... Error occurred prerendering page "/design/des". More details: https://err.sh/next.js/prerender-error: Error: Cannot find module './des.md&apos ...

javascriptnode.jsreactjsnext.js

I am experiencing difficulty typing continuously into the input box in reactJS

In one of my components, I have the capability to add and delete input fields multiple times. <> <form onSubmit={optimizeHandler}> <div className="filter-container"> {conditions.map((condition, index) => ...

javascriptreactjsmern

choosing a specific element within an HTML string stored in a variable

I have a variable containing HTML string data like this: var htmlstring = "<div><div class='testdiv'>924422</div></div>" My goal is to extract the content of the div with a specific class, in this case .testdiv. How ca ...

javascriptjqueryhtml

Can you assist in resolving this logical problem?

exampleDEMO The code above the link demonstrates how to control input forms based on a button group selection. In this scenario, when a value is inputted on the 'First' Button's side, all input forms with the same name as the button group ...

javascripthtmlangularjs

Using PHP to read an image blob file from an SVG

Currently, I am utilizing the Raphael JS library on the client-side to generate a chart in SVG format. However, my goal is to make this chart downloadable, which poses a challenge since SVG does not natively support this feature. Initially, I attempted to ...

javascriptphpsvgraphaelimagick

Dynamically load the configuration for a JQuery plugin

Currently, I am utilizing a JQuery plugin from this source. My goal is to dynamically load the configuration of the plugin without directly modifying it within the plugin file. Below are the default options provided by the plugin: $.Slitslider.def ...

javascriptphpjqueryjquery-plugins

"Utilizing three.js to smoothly move the camera forward with a left mouse click

I am currently working on a 3-D graphical website using three.js. The theme of the website is a universe filled with text. My goal is to make the camera move forward when the left mouse button is clicked and backward when the right mouse button is clicked. ...

javascriptthree.js

After the main page is loaded, the div will be dynamically populated with HTML content. How can we confirm that it has finished

I recently took over a project where a page loads and then code attached to that page populates a div with dynamically generated html – essentially filling an existing div with a string of html elements. Within this string are links to images, among oth ...

javascriptjqueryhtmlloading

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

I am currently working on a small web app that mimics browsing WikiPedia by fetching raw HTML content of WikiPedia articles through its API. I then display this HTML in my app using "dangerouslySetInnerHTML". I am faced with the challenge of enabling a us ...

javascripthtmlreactjsdom

I encountered an issue with loading an array from session storage in Java Script

I am struggling to restore and reuse a created array in HTML. I attempted using JSON, but it was not successful for me. In the code below, I am attempting to reload items that were previously stored in an array on another page. However, when I try to loa ...

javascriptarraysjsonsessionstorage