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

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

因此，我正在为我的个人网站创建一个主页，其中有各种大小的圆形按钮。最初我使用边界半径属性创建圆（这很好），但现在我尝试升级到SVG形状。我发现在任何SVG元素周围都有一个不可见的方形框（我认为是视图框）。这意味着我可以单击按钮，而不需要光标实际位于按钮上（即视图框的角）。如果按钮排成一行且大小相同，但它们不排成一行，并且有些按钮比其他按钮大得多，则这不会是一个问题

---

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

这个问题与您使用的SVG无关，而与您使用的HTML无关

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

您可以使用两个可行的选项

将边框半径与SVG结合使用。输入正确的值不会修剪SVG，它只会删除可单击的角点

使用一个。这已经存在了一段时间，因此在所有主流浏览器中都支持统一语法

---

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

您的假设是正确的，即“视图框”，实际上更多的是画布，是一个矩形。 大小在第一个SVG标记（）中给出

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

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

一般来说是这样的：

• 变量x，y；是鼠标光标在SVG中间的位置（这是以后使用sin和cos的最简单方法）
• var-r；是圆的半径
• var alpha=arctan（y/x）；//指向中间的点的角度
• 内部var=Math.abs（cos（alpha））

  ---

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

#什么：悬停{
填充：蓝色；
}

哈哈！第一个成功了！你知道，我之前也试过，但没用。我的CSS一定是打错了。谢谢你的快速反馈。一个多小时前就发布了。感谢您的快速反馈！我知道有一个javascript解决方案，但我试图单独用CSS来实现（应该指定）。谢谢你的回答和快速回复。