Displaying an image within a circle svg

Question

I've edited this question because my previous one might actually reduce to this....why am I seeing nothing here when I expect to see a circle with filled with an image:

<!DOCTYPE html>
<meta charset="utf-8">
<body>

    <svg width="100" height="100">
        <defs>
            <pattern patternUnits="userSpaceOnUse" height="100" width="100">
                <image id="image-JON" x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
                </image>
            </pattern>
        </defs>
        <circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">

        </circle>
    </svg>

</body>

Fairly sure that `fill="#image-JON"` should be `fill="url(#image-JON)"` though - https://stackoverflow.com/questions/29442833/svg-image-inside-circle — Paulie_D, Feb 20 '20 at 17:11
Yes you are right on that, but my issue is still occurring. I've edited my original question as I think it reduces to a simpler one. — Keith McNulty, Feb 20 '20 at 17:45

score 0 · Accepted Answer · answered Feb 20 '20 at 18:31

Solved, its the pattern tag that needs the ID, not the image tag:

<svg width="100" height="100">
        <defs>
            <pattern id="image-JON" patternUnits="userSpaceOnUse" height="100" width="100">
                <image x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
                </image>
            </pattern>
        </defs>
        <circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">

        </circle>
</svg>

Displaying an image within a circle svg

1 Answers1