Is there a way to change the image(base64) fill of an svg path useing js?

Question

I'm generating an image using canvas. I would like to use that image to fill an SVG path background. Only part of the SVG.

I have tried:

<path id="path1" class="st1" d="M80.2,43.1C74,37.8,67.9,32.5,61.7,27.2c1.6-3.6,3.2-7.1,4.8-10.7C71,25.3,75.6,34.2,80.2,43.1z"/>



document.getElementById("path1").setAttribute('fill',  "url('" + myCanvas.toDataURL() + "')");

also:

<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image id="bg1" href="" x="0" y="0" width="100" height="100" />

<path id="path1" class="st1" d="M80.2,43.1C74,37.8,67.9,32.5,61.7,27.2c1.6-3.6,3.2-7.1,4.8-10.7C71,25.3,75.6,34.2,80.2,43.1z"fill="url(#img)/>

document.getElementById("bg1").setAttribute('href',  "url('" + myCanvas.toDataURL() + "')");

I have tried with and without URL() and with and without quotes.

Answer 1

Something like this? I'm pulling from how to use base64 data in an img tag, how to fill an svg path with a background image, and this SO Post for downloading images as base64 text.

b64url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Pencil_drawing_of_a_girl_in_ecstasy.jpg/800px-Pencil_drawing_of_a_girl_in_ecstasy.jpg"

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL(b64url, function(dataUrl) {
  document.querySelector("#demoimg").src = dataUrl;
  el = document.querySelector("#imgtag");
  el.setAttribute("href", dataUrl);
});

<image id="demoimg" width="100" />

<br>
<br>

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
    <title>Text Pattern Fill Example</title>
    <defs>
     <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
       <image id="imgtag" x="0" y="0" width="100" height="100" />
     </pattern>
    </defs>
    
    <path d="M5,50
             l0,100 l100,0 l0,-100 l-100,0
             M215,100
             a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
             M265,50
             l50,100 l-100,0 l50,-100
             z"
          fill="url(#img1)" />
        
</svg>