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

我一直在这里呆了几天，在这个问题上找不到任何支持。你能创建一个真正圆形的SVG按钮吗？

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

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

来源

2016-03-25 GHOST-34

此问题与您使用的SVG无关，以及与您使用HTML的相关内容无关。

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

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

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

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

来源

2016-03-25 21:33:17 David

哈哈！第一个工作！你知道，我之前也尝试过这种方法，但没有奏效。我的CSS一定有一个错字。感谢您的快速反馈。不超过一个小时前发布。 –

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

如果让图片只在圆圈内部链接是非常重要的，你应该添加一些javasript。

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

一般来说它是这样的：

变种X，Y;是SVG中间的鼠标光标的位置（这是最后使用sin和cos的最简单方法）。
var r;是圆的半径
var alpha = arctan（y/x）; //点的朝向中间
变种内= Math.abs角度（COS（阿尔法））< Math.abs（X/R）& & Math.abs（SIN（阿尔法））< Math.abs（ Y/R）; //如果点在圆内，则内部为真

来源

2016-03-25 21:49:06

感谢您的快速反馈！我意识到一个JavaScript解决方案在那里，但试图在CSS中单独（应该指定）。尽管如此，感谢您的回答和快速回复。 –

假设这是内联SVG，请不要将您的mouseover事件放在SVG元素上，请将您的事件置于SVG形状上！

#what:hover { 
 
    fill: blue; 
 
}

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

来源

2016-03-26 02:15:37

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

回答

相关问题