Question

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

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

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

Answer 1

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

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

您有两个可行的选项可供使用。

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

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

Answer 2

你认为＆＃34;视图框＆＃34;实际上更像是一个画布，是一个矩形，这是正确的。大小在第一个SVG Tag（）中给出。

如果让图像仅链接到圆圈内是非常重要的，那么你应该添加一些javasript。

如何做到这一点取决于你想要添加的库（例如jquery）。

一般来说，它是这样的：

var x，y;是鼠标光标从SVG中间的位置（后来最简单的使用sin和cos的方法）。
var r;是圆的半径
var alpha = arctan（y / x）; //指向中间的点的角度
var inside = Math.abs（cos（alpha））＆lt; Math.abs（x / r）＆amp;＆amp; Math.abs（sin（alpha））＆lt; Math.abs（Y / R）; //如果点位于圆圈内，则为“内部”

Answer 3

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

＆＃13;

#what:hover {
  fill: blue;
}

＆＃13;

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

＆＃13;

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

3 个答案: