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

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"  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"  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.

CodePudding user response：

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>