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

如果你将圈子放入角膜＆＃34;你可以这样做。图片。以下是一个示例：http://jsfiddle.net/53tudL0k/1/

如你所见，＆＃34;角膜＆＃34;图片实际上是一个包含background-image和position: relative的div。

#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;
}

不要忘记存放＆＃34;角膜＆＃34; 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";

在图像上放置一个圆圈

1 个答案: