svgサークルホバーはボーダー上でのみ動作します

Question

ホバーで色を変える必要のあるソーシャルメディアボタンを追加しようとしています.SVGタグ内にサークルがあり、ホバーを追加しようとするとマウスを置くと機能します円の「境界」。 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>

ではなく、親にホバーを適用しました。 あなたがそれを含んでいないので、別のイメージを参照しました。イメージを使用してこのソリューションを適用する際に問題がある場合は、ここに含めてその特定のイメージで何が起こっているのかを見てみましょう。