Prevent clicking outside the blue circle svg

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?

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.

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

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

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

Cursor pointer is visible outside the blue svg circle.

That’s not what I’m seeing.

Try this:

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

Where I added red.

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

I’m using Chrome.

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


.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));

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

1 Like

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

Yes, as here:

1 Like

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?

svg.thePlay {
pointer-events: none;
<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64" pointer-events="none">
  <g id="play">
    <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" />

SVG only (experimental for HTML)


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 .

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"/> 

and add event listener to the <circle> element?

1 Like

I don’t know how to add the js to the code.

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

That would stop you clicking it altogether.

I gave you the simplest solution

1 Like

I am able to keep the drop-shadow in place here:

With your code it gets cut off.

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));

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?

or am I misunderstanding what you mean?

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


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