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 pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
            pattern.setAttributeNS(null, "id", "img1");
            pattern.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
            pattern.setAttributeNS(null, "height", "100");
            pattern.setAttributeNS(null, "width", "100");
            var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
            image.setAttributeNS(null, "x", "0");
            image.setAttributeNS(null, "y", "0");
            image.setAttributeNS(null, "height", "10");
            image.setAttributeNS(null, "width", "10");
            image.setAttribute("xlink:href", "http://www.abcteach.com/free/c/circlergb.jpg");
            
            pattern.appendChild(image);
            defs.appendChild(pattern);
            $('svg').append(defs);
        $("#c1").click(
            function () {
              ChangeImage();
            }            
        );
    });

function ChangeImage() {
       document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)");
}