Prevent clicking outside the blue circle svg

HTML & CSS
1

Right now you’re able to click outside the blue circle,

How do I prevent that?

So that it only opens when clicking on the svg itself?

Meaning, white space and everything inside the svg?

https://jsfiddle.net/kyvxc96o/

2

The problem is caused by the circle image being inside a square, so there is clickable space outside the circle in the corners. A simple answer is to change the circles to squares with the blue border coming right to the edge of the image.

3

Maybe someone would be able to come up with a good answer because I can’t, and I want to use a circle.

4

I’m not seeing the behaviour you describe in that JSFiddle on Firefox. Only the circles and the areas inside them are clickable.

5

The behavior I am trying to prevent is allowing clicking outside the blue svg circle.

Cursor pointer is visible outside the blue svg circle.

6

That’s not what I’m seeing.

screen1
screen11280×850 101 KB

screen2
screen21280×850 99.5 KB

7

Try this:
https://jsfiddle.net/xm23yv0a/

Are you able to click in-between the circles without it opening?

Where I added red.

8

Yes. Again, only the blue circles and the areas within them are clickable.

9

I’m using Chrome.

10

The svg is actually a square shape with a circle drawn inside so you will be able to click outside the blue circle but not outside the square.

Screen Shot 2021-09-06 at 11.12.24

The border-radius won’t clip the svg as it would with an image so the square shown will always be clickable.

You could use clip-path to clip the area but you’d have to allow room for the drop shadow or that gets cut off. circle(50%) would be exact but would cut the shadow off.

You’d have to do clip-path:circle(52px) which allows 3px for the shadow either side

e.g.

.thePlay {
  /*margin: auto 20px;*/
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
   clip-path:circle(52px);
}
11

You could also try not binding the click event to the entire SVG, but rather the path… shrug

1 Like
12

Only each circle (including fill) is clickable in Firefox but the whole SVG square is clickable in Chrome.

Yes, as here:

1 Like
14

What about doing it this way instead, and is there anything you would change?

or is this not a good way?

Should that not be used because it says: experimental?

https://jsfiddle.net/0axduzgv/

svg.thePlay {
pointer-events: none;
}

<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64" pointer-events="none">
  <g id="play">
    <title>Play</title>
    <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
    <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
    M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
  </g>
</svg>

SVG only (experimental for HTML)

visiblePainted

SVG only (experimental for HTML). The element can only be the target of a pointer event when the visibility property is set to visible and e.g. when a mouse cursor is over the interior (i.e., ‘fill’) of the element and the fill property is set to a value other than none , or when a mouse cursor is over the perimeter (i.e., ‘stroke’) of the element and the stroke property is set to a value other than none .

880×425 11.5 KB

15

Why not use this:

<svg viewbox="0 0 90 90">
<polygon points="35,24 62,45 35,66" fill="blue" />
<circle cx="45" cy="45" r="40" stroke-width="10" stroke="blue" fill="transparent"/> 
</svg>

and add event listener to the <circle> element?

1 Like
16

I don’t know how to add the js to the code.
https://jsfiddle.net/0axduzgv/

17

There’s much too much of your code to wade through :grinning:

So I demonstrated one way of adding event listeners to all <circle> elements here:

(ignore the layout of the SVGs)

1 Like
18

That would stop you clicking it altogether.

I gave you the simplest solution

1 Like
20

I am able to keep the drop-shadow in place here:
https://jsfiddle.net/0axduzgv/

With your code it gets cut off.
https://jsfiddle.net/q4n6gbk3/

Without changing this:
clip-path: circle(45px);

How would I be able to keep the drop-shadow in place?
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));

21

I don’t understand what you mean by,

That would stop you clicking it altogether.

Outside the blue circle nothing should be clicked on.

Which is what I am doing, here right?
https://jsfiddle.net/0axduzgv/

https://jsitor.com/NNaQrC7nx

or am I misunderstanding what you mean?

In the code, the child elements of the svg have pointer-events enabled.

pointer-events="visiblePainted"

22

With my code, to stop the drop-shadow being cut off the trick is to apply the drop-shadow to the SVG element instead of to the <circle> element. That also puts a drop-shadow on the <polygon> element.

I have updated the CodePen in post #17.

1 Like