1

For my website, I want the users to be able to click on various svg elements.

I've coded up a quick function to let users click on enclosed shapes. I basically just run document.elementFromPoint(x, y) on them. This works great for any enclosed shape, since they have clickable area. Open paths, however, are a pain to click because they're only 1-2 pixels in size.

I would like to allow the user to select them by clicking 'close enough' to it, such that if the click is, for example, 10 or fewer pixels away from the path, the path would be selected. I could write a mathematical algorithm for this (using Ray-Casting that only goes 10 pixels out for example, or turn points into 10px-radius circles and check for intersections with the path), but my intuition tells me there must be an easier way, perhaps via CSS.

One idea I was thinking of is if the stroke for this path was 10 pixels thick for selection purposes, but only 1 pixel thick visibly (or having a 'padding' that would apply to the path rather than the bounding box). I've also looked at pointer-events, but aside from bounding box (which I would rather not use to avoid selecting other shapes) I don't see any useful settings there. Is there something I could leverage in JavaScript or CSS that can help me accomplish this without doing the math for the paths myself (since it may get ugly for cubic beziers, etc.)?

I should also mention that this is an HTML5 app, so I don't care about backwards-compatibility.

2 Answers 2

3

If the paths have no stroke then you can create an invisible stroke (stroke-opacity="0") and use pointer-events="all" to give the shape an extended hit area.

If the paths do have strokes then you need to create a second invisible path on top of the visible path with the same coordinates but a bigger stroke-width. You can then use pointer-events="all" to make this invisible path the hit target and if it is hit you react in the event handler as if the visible shape was hit.

1
  • Works pretty well, I put both paths inside a single symbol element that I reference via use. This way both paths are automatically part of the same shape. Mar 9, 2014 at 1:04
1

Robert Longson describes how you can do this, but I wanted to add some more details.

First, you don't need to duplicate or create new geometry if you don't want to. You can also use a <use> element. You can use some css to give shapes a different look even when some other invisible element is hovered.

<style>
  g { fill: #ddd; stroke: black; pointer-events: none; }
  use { pointer-events: all; stroke-width: 40; fill: none; stroke-opacity: 0; }
  use:hover + * { fill: cornflowerblue; }
<g>
  <use xlink:href="#c"/>
  <circle id="c" cx="50" cy="60" r="20"/>
</g>

See live example.

2
  • This seems to work only when you don't specify stroke-width on the original element, if you do it, than use element ignores the new stroke-width, is there any way to bypass this issue?
    – Dahmane
    Oct 22, 2020 at 23:16
  • I found a work around, if you set stroke-width on the parent element (it can be g), than the path or any shape inherits that stroke-width but use element does not ignore the stroke-width specified on it directly.
    – Dahmane
    Oct 22, 2020 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.