svg circle hover работает только на границе

Question

Я пытаюсь добавить некоторые кнопки социальных сетей, которые должны менять цвет при наведении, у меня есть круг внутри тега svg, и когда я пытаюсь добавить hover, он просто работает, если я надену мышь на «граница» круга. Here's 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> 

и CSS

svg circle:hover { 
    fill: red; 
} 

Может кто-нибудь сказать мне, как сделать парить на весь круг? уже попытался сделать это на svg, но у него есть прямоугольник, внутри которого находится круг, который тоже меняет цвет. другой вопрос: могу ли я сделать раунд svg?

Answer 1

Я думаю, что ваша проблема - это изображение, ваш код работает правильно, но изображение внутри не имеет никакого эффекта.

Проверить этот пример:

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>

Что я сделал было применить парить на родителя вместо этого. Я ссылался на другое изображение, потому что вы его не включили. Если у вас возникли проблемы с применением этого решения с использованием вашего изображения, включите его здесь, чтобы мы могли видеть, что происходит с этим конкретным изображением.