SVG : xlink:href loaded image not working in safari

I have load base64encodeed image to 'xlink:href' attributes for #patternImage image tag. Its working fine in Chrome and Firefox but not working in Safari.

Html :

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" id='svgId' width="576" height="720" style="outline:auto;" >
    <defs>
        <pattern id="imgpattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <image id="patternImage" xlink:href="" width="20" height="20"></image>
        </pattern>
    </defs>
    <path id="svgpath" stroke="#f000" fill="#ff0000" stroke-width="0.25px" style="fill:url(#imgpattern) !important"></path>
</svg>

JS :

$("#patternImage").attr("xlink:href",encodedImage);
$("#patternImage").load(function(){
    console.log("Loaded");
});

Thank You Kaiido

The Solutions is :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id='svgId' width="576" height="720" style="outline:auto;">
        <defs>
            <pattern id="imgpattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <image id="patternImage" xlink:href="" width="20" height="20"></image>
            </pattern>
        </defs>
        <path id="svgpath" stroke="#f000" fill="#ff0000" stroke-width="0.25px" style="fill:url(#imgpattern)" d="M0,0H576V720H0z"></path>
</svg>

Javascript :

fetch("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg").then(r => r.blob())
  .then(b => new Promise(res => {
    const f = new FileReader();
    f.onload = e => res(f.result);
    f.readAsDataURL(b);
  }))
  .then(encodedImage => {
    $("#patternImage").attr("xlink:href", encodedImage);
    $("#patternImage").load(function() {
    });
  });