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

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>