Question

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.

<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 have also tried applying the pattern 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 checked that the image is correct. I have 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 HTML5 spec element, while <image> is part of the SVG spec. More information here: http://www.w3.org/TR/SVG/struct.html#ImageElement