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

Question

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

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

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

Answer 1

此问题与您使用的 SVG 无关，而与您使用的一切有关 HTML。

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

您有两个可行的选择。

将 border-radius 与 SVG 结合使用。输入正确的值不会 trim SVG，它只会删除可点击的角。
使用 map。这已经存在了一段时间，因此在所有具有统一语法的主要浏览器中都得到支持。

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

Answer 2

您的假设是正确的，"view box" 实际上更像是 canvas 是一个矩形。大小在第一个 SVG 标签 () 中给出。

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

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

一般情况下是这样的：

var x,y;是鼠标光标从 SVG 中间开始的位置（这是之后使用 sin 和 cos 的最简单方法）。
var r;是圆的半径
var alpha = arctan(y/x); // 点向中间的角度
var inside = Math.abs(cos(alpha)) < Math.abs(x/r) && Math.abs(sin(alpha)) < Math.abs (y/r); //如果点在圆圈内则为真

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

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

Can you create a truly circular SVG button?

geometry

svg

button

hover

viewbox