JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<button>Set Img</button>

<svg width="500px" height="500px">
  <defs>
    <svg id="file" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>
  </defs>
  <g>
    <rect x="0" y="0" width="1000px" height="1000px" fill="green"></rect>
    <circle cx="250" cy="250" r="50" fill="white" opacity="0.5"></circle>
    <rect x="237.5" y="237.5" width="25" height="25" fill="none" stroke="black"></rect>
    <use x="237.5" y="237.5" width="15" height="15" xlink:href="https://jsfiddle.net/klaascuvelier/1aftgucq/#file"></use>
  </g>
</svg>

JavaScript

function gen() {
	const el = document.querySelector('use');
  el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href' ,'https://jsfiddle.net/klaascuvelier/1aftgucq/#file');
}

document.querySelector('button').addEventListener('click', gen);

console.log('READY');