在图像上放置一个圆圈

Question

我在背景中有一个图像 (cornea.svg)，我使用 svg 创建了一个小圆圈。我想要做的是在点击时将圆圈放在图像上以及我点击的位置上。

<!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

需要帮助。

Answer 1

如果您将圆圈放入 "cornea" 图像中，则可以做到这一点。这是一个示例：http://jsfiddle.net/53tudL0k/1/

如您所见，"cornea" 图像实际上是一个 div 加上一个 background-image 和一个 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;
}

不要忘记存储 "cornea" div 坐标：

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

因为您需要它们来正确移动您的圈子：

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

在图像上放置一个圆圈

place a circle on the image

svg

jquery-svg

svg-animate