svg circle hover仅适用于边框

I am trying to add some social media buttons that should change color on hover, i have a circle inside an svg tag and when i try to add hover it just works if i put the mouse on the "border" of the circle. Here´s the html

我正在尝试添加一些应该在悬停时改变颜色的社交媒体按钮，我在svg标签内有一个圆圈，当我尝试添加悬停时，如果我将鼠标放在圆圈的“边框”上，它就会起作用。这是html

<svg>
   <circle cx="50%" cy="50%" r="20" fill=#009ddf />
   <image x="20%" y="23%" width="30" height="30" xlink:href="images/svg/facebook.svg"/>
</svg>

and the css

和css

svg circle:hover {
    fill: red;
}

Can someone tell me how to do hover on the whole circle? already tried doing it on the svg but it has a rectangle where the circle is inside that changes color too. another question is can i make the svg tag round?

谁能告诉我如何在整个圈子上盘旋？已经尝试过在svg上做它但它有一个矩形，其中圆圈在里面也会改变颜色。另一个问题是我可以将svg标签变成圆形吗？

1 个解决方案

#1

I think your problem is the image, your code works properly, but the image inside has no effect.

我认为您的问题是图像，您的代码正常工作，但内部图像无效。

Check this example:

检查此示例：

svg:hover circle {
    fill: red;
}

<svg>
   <circle cx="50%" cy="50%" r="40" fill=#009ddf />
   <image x="45%" y="40%" width="30" height="30" xlink:href="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg"/>
</svg>

What I've done was apply the hover on the parent instead. I've referenced another image because you did not include it. If you have problems to apply this solution using your image, include it here to let us see what's going on with that particular image.

我所做的是将悬停应用于父级。我引用了另一张图片，因为你没有包含它。如果您在使用图像时无法应用此解决方案，请将其包含在此处，以便让我们了解该特定图像的效果。

#1