title: Add a background image (.png) to a SVG circle shape
body: <p>Is this possible?  The following is what I tried but it completely fills the circle with black.</p>
  
  <pre><code>&lt;svg id='vizMenu' width="700" height="660"&gt;
      &lt;defs&gt;
          &lt;filter id="dropshadow" height="130%"&gt;
              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="2"/&gt; 
              &lt;feOffset dx="0.5" dy="0.8" result="offsetblur"/&gt; 
              &lt;feMerge&gt;
                  &lt;feMergeNode/&gt;
                  &lt;feMergeNode in="SourceGraphic"/&gt;
              &lt;/feMerge&gt;
          &lt;/filter&gt;
      &lt;/defs&gt;
      &lt;circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/&gt;
      &lt;circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/&gt;
      &lt;circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/&gt;
  &lt;/svg&gt;
  </code></pre>