title: svg circle hover only works on border
body: <p>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</p>
  
  <pre><code>&lt;svg&gt;
     &lt;circle cx="50%" cy="50%" r="20" fill=#009ddf /&gt;
     &lt;image x="20%" y="23%" width="30" height="30" xlink:href="images/svg/facebook.svg"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>svg circle:hover {
      fill: red;
  }
  </code></pre>
  
  <p>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?</p>