Question

我正在使用一个圆形图标（来自font-awesome库），该图标充当页面上的按钮。问题是图标的可点击区域像其他HTML元素一样都是矩形。

有什么方法可以将可点击区域限制为圆形，以便仅当您在不透明区域内单击时按钮才起作用，而不是在透明边界框上单击时按钮是否起作用？

我知道您可以使用地图定义图像上的可点击区域，但是我对SVG还是陌生的，找不到使用SVG进行相同操作的方法。

我也尝试了{border-radius: 50%}，但无济于事。这是我正在使用的图标以及HTML代码：

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>

Answer 1

您使用border-radius:50%的想法对我有用：

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

更新

OP表示他们正在寻找SVG兼容解决方案。同样在这种情况下，border-radius：50％派上用场了：

* {
  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>

如何在SVG按钮/链接上映射可点击区域？

1 个答案:

更新