CODEWITHSUNDEEP
javascripthtmlcsssvgfont-awesome
Amin Hemati Nik
Amin Hemati Nik

Reputation: 517

How to map the clickable area on a SVG button / link?

I am using a Circle shaped icon (from the font-awesome library) which acts as a button on my page. the problem is that the clickable area of the Icon is rectangular like any other HTML element.

is there any way to limit the clickable area to a circular shape so the button works only when you click inside the opaque area and not when you click on transparent bounding box?

I know that you can use maps to define clickable areas on images but Im new to SVG and could not find how to do the same thing with SVG.

I also tried {border-radius: 50%} but no avail. this is the Icon I am using and the HTML code:

https://fontawesome.com/icons/plus-circle?style=solid 

<div id="new_item">
  <span class="fas fa-plus-circle fa-4x"
        data-toggle="modal"
        data-target="#newEvent_modal">
  </span>
</div>

Upvotes: 0

Views: 3904

Answers (1)

enxaneta
enxaneta

Reputation: 33054

Your idea of using border-radius:50% works for me:

.floating-button {
  font-size:30px;
  display: block;
  border: 1px solid;
  width: 1em;
  height: 1em;
  text-align: center;
  border-radius: 50%;
  margin:2em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

<div id="new_item">
  <a class="floating-button" href="#">
    <i class="fa fa-plus"></i>
  </a>
</div>

Update

The OP commented that they are looking for a SVG compatible solution. Also in this case border-radius:50% comes in handy:

* {
  font-size: 32px;
  margin: 0;
  padding: 0;
}
svg {
  width: 1em;
}
a {
  border-radius: 50%;
  display: inline-block;
  width: 1em;
  height:1em;
  margin:1em;
  overflow:hidden;
  border:1px solid red;
}
<div id="new_item">
  <a class="floating-button" href="#">
  <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" ></path></svg>
  </a>
 </div>

Upvotes: 2

Related Questions