你能创建一个真正的圆形 SVG 按钮吗？答案

【问题标题】：Can you create a truly circular SVG button?你能创建一个真正的圆形 SVG 按钮吗？
【发布时间】：2016-03-25 21:17:46
【问题描述】：

我已经在这个问题上待了几天，找不到任何关于这个问题的支持。

因此，我正在为我的个人网站创建一个主页，其中包含不同大小的圆形按钮。最初我使用 border-radius 属性（效果很好）来创建圆圈，但现在我正在尝试升级到 SVG 形状。我发现任何 SVG 元素（我认为是 viewbox）周围总是有一个不可见的方形框。这意味着我可以单击按钮而光标实际上不在按钮上（即视图框的角落）。如果按钮排成一行并且大小相同，但它们不在一行中并且有些比其他按钮大得多，这将不是问题。

有没有办法创建一个真正的圆形 SVG 按钮？

【问题讨论】：

标签： button svg hover geometry viewbox

【解决方案1】：

此问题与您使用 SVG 无关，与您使用 HTML 无关。

默认情况下，HTML 是所有框。大部分没有四舍五入。

您有两个可行的选择。

将border-radius 与SVG 结合使用。放置正确的值不会修剪 SVG，只会删除可点击的角。
使用map。这已经存在了一段时间，因此在所有主流浏览器中都具有统一的语法。

我建议#1，因为它更容易。 #2 需要您了解更多信息（半径和中心点）。

【讨论】：

哈哈！第一个成功了！你知道，我之前也试过这个，但没有用。我的 CSS 一定有错字。也感谢您的快速反馈。发布时间不超过一小时。

【解决方案2】：

您的假设是正确的，“视图框”实际上更像是一个画布，是一个矩形。大小在第一个 SVG Tag () 中给出。

如果让图片只链接在圆圈内对您来说非常重要，您应该添加一些 javasript。

如何做到最好取决于您要添加的库（例如 jquery）。

一般是这样的：

变量 x,y;是鼠标光标从 SVG 中间的位置（这是之后使用 sin 和 cos 的最简单方法）。
变种r;是圆的半径
var alpha = arctan(y/x); // 点朝向中间的角度
var inside = Math.abs(cos(alpha))

【讨论】：

感谢您的快速反馈！我知道那里有一个 javascript 解决方案，但试图单独在 CSS 中完成它（应该指定）。尽管如此，还是感谢您的回答和快速响应。

【解决方案3】：

假设这是内联 SVG，不要将鼠标悬停事件放在 SVG 元素上，将事件放在 SVG 形状上！

#what:hover {
  fill: blue;
}

<svg width="600px" height="600px" >
  <circle id="what" cx="200" cy="200" r="100" fill='red'/>
  </svg>

【讨论】：