html – White space outside of svg should be not clickable, only inside


How would it be written for only the svg to be clickable?

Meaning, having only the white space outside the blue circle being not clickable?

Having only the blue circle and everything inside would be clickable.

All the white space outside the blue circle would be not clickable.

All the white space inside the blue circle would be clickable.

That’s what I am trying to do.

Setting it up this way: How it is viewed in the snippet.

White space outside and inside the blue circle is clickable.
https://jsfiddle.net/fvp7cx96/1/

.thePlay {
}

Setting it up this way:

White space outside and inside the blue circle is not clickable.
https://jsfiddle.net/m6bkr18e/2/

#play {
}
.thePlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 64;
  height: 64;
  border-radius: 50%;
  cursor: pointer;
  fill: blue;
}
<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <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>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here