title: SVG image in rect or circle show as black
body: <p>I have been searching all over stackoverflow and google to find a reason as to why my code isn't working. I am trying to place an image as the fill for a circle but it just shows as black. Here is what I have.</p>
  
  <pre><code>&lt;svg width="100%" height="99%"&gt;
      &lt;defs&gt;
          &lt;pattern id="tile-ww" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24"&gt;    
              &lt;img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"&gt;
          &lt;/pattern&gt;
          &lt;pattern id="tile-us" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24"&gt;
              &lt;img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
  
      &lt;g id="stage" transform="translate(80,10)"&gt;
          &lt;g class="node" transform="translate(380,44.375)"&gt;
              &lt;rect class="name" ry="3" rx="3" height="15" x="-32" width="32"&gt;&lt;/rect&gt;
              &lt;circle r="54.5" id="circle-4" fill="url(#tile-ww)"&gt;&lt;/circle&gt;
              &lt;text id="text-4" x="-10" dy=".35em" text-anchor="end" z="1"&gt;Jon&lt;/text&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I have also tried applying the pattern with css but to no avail</p>
  
  <pre><code>.node circle {
      cursor: pointer;
      stroke: #282828;
      stroke-width: 1.5px;
      fill: url(#tile-ww);
  }
  </code></pre>
  
  <p>I have double and triple checked that the image is correct. I have tried relative and absolute paths but no luck.</p>