[SOLVED] place a circle on the image

place a circle on the image

I have an image(cornea.svg) in the background and i created a small circle using svg. What i want to do is place the circle on the image on click and on the position i clicked.

<!DOCTYPE html>
<html>
  <head>
    <title>Svg Demo</title>

    <script="given a cdn(google)" </script>
 </head>
    <body>
       <img src="cornea.svg" height="500" width="500" alt="nothing"/>

     <svg>
        <circle id='circle' cx='100' cy='100' r='5' fill="red" />

     </svg>


 <script>
    $('#circle').hide();

    $('body').click(function(){
    $('#circle').toggle();
    });
</script>
</body>

img link:https://drive.google.com/open?id=0B6XXwY4kvGuXSXJsd3JLWU0tLVU&authuser=0

need help.

Solution

You can do this if you put your circle into the "cornea" image. Here is a sample: http://jsfiddle.net/53tudL0k/1/

As you see, the "cornea" image is actually a div with a background-image and a position: relative.

#circle {
    background-image: url(https://www.webkit.org/blog-files/circle.svg);
    background-size: 100% 100%;
    width: 64px;
    height: 64px;
    margin: -32px -32px;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0;
}

#image {   
    position: relative;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg);
    background-size: cover;
    width: 640px;
    height: 480px;
    box-shadow: 0 0 8px 2px #000 inset;
}

Do not forget to store the "cornea" div coordinates:

var img = document.getElementById("image");
var rect = img.getBoundingClientRect();
var x0 = rect.left;
var y0 = rect.top;

Because you need them to correctly move your circle:

    var x = evt.clientX - x0;
    var y = evt.clientY - y0;
    circle.style.left = x + "px";
    circle.style.top = y + "px";