title: How to dynamically change the image pattern in SVG using Javascript
body: <p>How can I dynamically change/add an image pattern into an existing SVG on my page using Javascript? Or any library.</p>
  
  <p>This is what I've got so far..</p>
  
  <pre><code>function addSvgStuff(svg, id) {
  
      var svgNS = svg.namespaceURI;
      var pattern = document.createElementNS(svgNS, 'pattern');
  
      pattern.setAttribute('id', id);
      pattern.setAttribute('patternUnits', 'userSpaceOnUse');
      pattern.setAttribute('width', 500);
      pattern.setAttribute('height', 500);
  
          var image = document.createElementNS(svgNS, 'image');
          image.setAttribute('xlink:href', 'http://www.jampez.co.uk/sensoryuk/events/test.jpg');
          image.setAttribute('x', -100);
          image.setAttribute('y', -100);
          image.setAttribute('width', 500);
          image.setAttribute('height', 500);
  
      pattern.appendChild(image);
  
      var defs = svg.querySelector('defs') ||
      svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild);
  
      $('svg polygon').attr('fill', 'url(#' + id + ')');
  
      return defs.appendChild(pattern);
  }
  </code></pre>