title: :Hover to Show an Image on .SVG
body: <p>I have a .svg icon and want to show an image when I hover the icon.
  It works on normal icon (red square), but somehow it doesn't work .svg (black circle)! </p>
  
  <p>Please give a hand.
  Thanks!</p>
  
  <p><a href="https://jsfiddle.net/4nq3m0oe/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="red"&gt;
  &lt;/div&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .svg-circle {
          fill-rule: evenodd;
          fill: 'black';
        }
      &lt;/style&gt;
      &lt;circle id="myDefsCircle" class="svg-circle" r="20" cx="100" cy="100"/&gt;
    &lt;/defs&gt;
  
     &lt;use x="10" y="0"   xlink:href="#myDefsCircle" class="red"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.red:hover {
    fill:red;
    background: url('https://www.iconsdb.com/icons/preview/orange/phone-46-xxl.png') no-repeat;
    width: 250px;
    height: 200px;
    background-position: center;
  }
  
  .red {
    border: 1px solid red;
    width: 20px;
    height: 20px;
  }
  </code></pre>