Enhance the clickable region of an SVG outline

I need to find a way to expand the clickable area of an SVG border made from strokes without fill.

If I add a border with stroke width to enlarge the click zone, it will interfere with the existing borders on the shapes. Adding a second transparent layer below is also not an option due to selection mechanisms and real-time element updates in place.

Is there a solution where multiple layers function as one to increase the clickable area?

EDIT: Here is a sample shape code

<g>
    <path class="graph_edge" d="M239.25 -185.8L290.125 
        -185.8L290.125 -281L341 -281">
    </path>
</g>

Given the constraints, adding an id or altering the existing path are not viable options for me at the moment.

javascripthtmlcsssvg

Answer №1

When it comes to making shapes clickable, there are a few techniques you can use. One option is to only make the stroke clickable by using no fill. Alternatively, you can utilize a transparent fill to enable clickability within the shape. Another approach is to combine both methods by reusing the shape with <use> and implementing a wider transparent stroke, then grouping them together to create a clickable area.

#clickable:hover{cursor:pointer}
<svg width="250" height="150" viewBox="0 0 250 150">
 <defs> 
  <rect id="therect" x="20" y="20" height="80" width="100" >
  </rect>
  </defs>
  
<g  id="clickable">

<use xlink:href="#therect" stroke="#006600" stroke-width="5" fill="none" fill-opacity="0.5" />

<use xlink:href="#therect" stroke="#000" stroke-width="25" fill="none"  stroke-opacity="0" />

</g>
</svg>

UPDATE: The OP has specified that each edge is created using paths without an ID or references. In this scenario:

  1. An array of all paths with the class .graph_edge is generated

  2. All these paths are closed (including the one provided by the OP) by adding a "z" at the end of the d attribute using JavaScript

  3. A transparent border is applied in CSS to increase the clickable area of the shape without being visible

PS Quite an interesting edge shape!

let pathsArray = Array.from(
document.querySelectorAll(".graph_edge"))


pathsArray.forEach(p =>{  
  let thisD = p.getAttributeNS(null,"d");
  p.setAttributeNS(null, "d", thisD+"z")
})
svg{border:1px solid;}

.graph_edge{stroke:rgba(0,0,0,0); stroke-width:15px; cursor:pointer;}
<svg viewBox = "230 -290 120 120"><g>
    <path id="test" class="graph_edge" d="M239.25 -185.8L290.125 
        -185.8L290.125 -281L341 -281">
    </path>
</g>
</svg>

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

I encountered an unexpected token error while using JavaScript syntax with objects

In my current coding project, I have encountered an issue while attempting to utilize an object from a different JavaScript file. Despite importing the necessary function from this external file, there seems to be a syntax error present. Can anyone offer ...

javascriptreactjs

What is the best way to refresh a page during an ajax call while also resetting all form fields?

Each time an ajax request is made, the page should refresh without clearing all form fields upon loading Custom Form <form method='post'> <input type='text' placeholder='product'/> <input type='number&a ...

javascriptjqueryajaxdjangoforms

Showing dynamic content retrieved from MongoDB in a list based on the user's selected option value

Implementing a feature to display MongoDB documents conditionally on a webpage is my current goal. The idea is for the user to choose an option from a select element, which will then filter the displayed documents based on that selection. For instance, if ...

javascriptnode.jsmongodbexpressejs

The table row disappears but the value persists

I have designed a table where users can perform calculations. However, when a row is deleted, the values from that row appear in the row below it and subsequent rows as well. What I want is for the user to be able to completely remove a row with its values ...

javascripthtmlreactjs

What is the best way to place two input fields side by side within a table cell so that they each occupy 50% of the width?

Looking for some table help here: <table> <tr> <td> <input type="text" class="half"/> <input type="text" class="half" /> </td> <td> <input type="text"/> </td> &l ...

htmlcss

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch

Intermittent issues with service property updates

This particular question may require some detailed explanation. If you find yourself stuck and want to try running the full app, it's available on GitHub. (Just remember, if you decide to login, the username and password can be found in API/tasks/pop ...

javascriptjqueryember.jscoffeescript

Changing SVG containing image tags into HTML canvas

I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...

javascriptjqueryhtmlsvg

The revised document now exceeds 16,777,216 in size

When attempting to add new data to an array using mongoose, I encountered two errors. Here is the code snippet in question: return await db.fileMeta.findOneAndUpdate({ username: username, 'files.fileUID': { $ne: data.fileUID } ...

javascriptmongodbmongoosemongoose-schema

Using PHP to display arrays on the screen

Currently, I am working on manipulating an array in my code. I have already accessed the array and begun the process of displaying its contents using the following code snippet: <html> <?php $file=fopen("curr_enroll_fall.csv", "r"); $records[]=fg ...

phphtmlarraysmatrix

Verify if the user is currently active

Is there a method to determine if the user is not active? I am currently utilizing raw PHP. I would like for the user to be automatically logged out once they close the window, indicating their inactivity. I attempted implementing window.addEventListener ...

javascriptphp

Incorporating HTML elements within JSON data

I have validated my JSON Data using JSONLint and here it is: [{ "text": "Products", "data": {}, "children": [{ "text": "Fruit", "data": { "price": "", "quantity": "", "AddItem": "&#43;", "RemoveItem": "&#215 ...

jqueryhtmljsontreetablejstree-dnd

Can the background image be resized while preserving the offsets?

Can I adjust the offsets of multiple images within an image and resize it to a different width and height? I have an image that I want to shrink while maintaining the x and y offsets of the individual images inside it. Below is a sample of the image I ha ...

css

What is the best way to save a hash in a form input field?

If I have a hash and want to pass it as a value with val() $("#form_attribute").val( hash ) Instead of storing it as a string "[Object, object]", how can I keep it as a hash and allow the form to send this hash to my server? ...

javascriptjquery

When using WebDriver's executeScript method, the returned text from an alert is provided rather than the value obtained from a JavaScript

Here is my JavaScript code embedded in an HTML file: function CallMe(a,b){ alert("Hello"); var c = a + b; return c; } Below is my Java code for Selenium WebDriver: JavascriptExecutor executor = (JavascriptExec ...

javajavascriptseleniumselenium-webdriverwebdriver

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

Creating a production build with sourcemaps in Angular using the CLI

How can I preserve sourcemaps after the production build process? Currently, my command appears as follows: "build-prod": "ng build --app=release -prod && cp -R lang dist" I attempted to modify it to: ng build --app=release --sourceMap=true -prod && cp ...

javascriptnode.jsangulartypescriptangular-cli

React error: The module "react-router-dom" does not have a member named "useNavigate" available for export

I'm attempting to include useNavigate for use as outlined in the top answer here: react button onClick redirect page import { useNavigate } from "react-router-dom"; However, I am encountering this error: export 'useNavigate' (impo ...

javascriptreactjstypescriptreact-hooksreact-router

How to access localStorage within an AngularJS module

Upon successful login, I save the user's data in the localStorage and redirect them to the Dashboard. LoginCtrl: (function() { 'use strict'; angular.module('BlurAdmin.pages.login') .controller('LoginCtrl& ...

javascriptangularjs

Is there a viable substitute for websockets that can be utilized on shared hosting platforms?

Are there any viable alternatives for websockets that can be used with shared hosting? While I'm aware of node.js, socket.io, and Express.js, I'm unable to use them in a shared hosting environment. If there are other options available for creatin ...

javascriptphpajaxreal-time