JQuery Click Event

JQuery Click Event

HTML

<svg id="svg1">
 <circle id="c1" cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="blue"/>

</svg>

JavaScript

$(document).ready(function () {
  var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
    
            var circle = $('circle');
    
            var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
            pattern.setAttribute( "id", "img1");
            pattern.setAttribute( "patternUnits", "userSpaceOnUse");
            pattern.setAttribute("height", "100");
            pattern.setAttribute("width", "100");
            var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
            image.setAttribute("x", "0");
            image.setAttribute("y", "0");
            image.setAttribute("height", "100");
            image.setAttribute("width", "100");
    image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "http://www.abcteach.com/free/c/circlergb.jpg");
            
            pattern.appendChild(image);
            defs.appendChild(pattern);
            $(defs).insertBefore(circle);
        $("#c1").click(
            function () {
              ChangeImage();
            }            
        );
    });
  
  function ChangeImage() {
       document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)");
  }