SVG image in a rectangle or circle is shown as black

Question

I searched all of stackoverflow and google to find the reason why my code is not working. I am trying to place the image as a circle fill, but it just displays as black. Here is what I have.

<svg width="100%" height="99%"> <defs> <pattern id="tile-ww" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24"> <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"> </pattern> <pattern id="tile-us" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24"> <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"> </pattern> </defs> <g id="stage" transform="translate(80,10)"> <g class="node" transform="translate(380,44.375)"> <rect class="name" ry="3" rx="3" height="15" x="-32" width="32"></rect> <circle r="54.5" id="circle-4" fill="url(#tile-ww)"></circle> <text id="text-4" x="-10" dy=".35em" text-anchor="end" z="1">Jon</text> </g> </g> </svg> 

I also tried applying the template with css, but to no avail

 .node circle { cursor: pointer; stroke: #282828; stroke-width: 1.5px; fill: url(#tile-ww); } 

I have double and triple checks that the image is correct. I tried relative and absolute paths, but no luck.

Answer 1

Use <image /> instead of <img /> in your pattern defs. Worked for me!

<img> is an element of the HTML5 specification, and <image> is part of the SVG specification. Further information here: http://www.w3.org/TR/SVG/struct.html#ImageElement