JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="height: 405px;">
    <g class="item-view" data-id="8" transform="translate(186.50687741518976,99.62945152749784)">
        <circle id="circle-8" r="60" opacity="1" style="fill:rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
        <text x="-35.5" y="-27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">New item</text>
        <text x="-46" y="-9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">created with</text>
        <text x="-42.5" y="9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">moderation</text>
        <text x="-30.5" y="27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">disabled</text>
    </g>
    <g class="item-view" data-id="9" transform="translate(186.36080783220538,219.60697802343384)">
        <circle id="circle-9" r="60" opacity="1" style="fill: rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
        <text x="-47" y="-9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">New item by</text>
        <text x="-23" y="9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">Seppo</text>
    </g>
    <g class="item-view" data-id="3" transform="translate(559.4999999997835,332.46850012177873)">
        <circle id="circle-3" r="60" opacity="1" style="fill:rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
  ...

JavaScript

var SVG_NS = $('svg')[0].namespaceURI;

var pattern = document.createElementNS(SVG_NS, 'pattern');

pattern.setAttribute('id', 'SVGBackgroundImage');
pattern.setAttribute('patternContentUnits', 'objectBoundingBox');
pattern.setAttribute('width', '1');
pattern.setAttribute('height', '1');

var image = document.createElementNS(SVG_NS, 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg');
image.setAttribute('width', '1');
image.setAttribute('height', '1');

pattern.appendChild(image);

$('svg')[0].appendChild(pattern);

$('g.item-view circle').each(function (index) {
    $(this).attr('style', 'fill: url(#' + pattern.id + ');');
});