<svg>元素在鼠标事件期间更新位置时无法移动

James Newton 发表于 Dev

詹姆斯·牛顿

设定一个的左侧和顶部属性svg元件，或一个div含有svg当呼叫来自于鼠标事件内部元件失败。

我创建了一个jsFiddle来说明这一点。下面的演示HTML页面供参考。在Chrome，Firefox和Safari中进行了测试。

这是svg元素的预期行为吗？

我希望用户能够拖动svg元素。我该如何实现？

<!DOCTYPE html>
<html>
<head>
  <title>SVG</title>
  <meta charset="utf-8" />
  <style>
  .dot {
      position: absolute;
  }

  #green{
      left: 20px;
      top: 20px;
  }

  #orange{
      left: 20px;
      top: 60px;
  }

  #red {
      left: 20px;
      top: 100px;
      background: red;
      height: 20px;
      width: 20px;
  }
  </style>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head>

<body>    
    <svg version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             baseProfile="tiny"
             id="green"
             class="dot"
             width="20" height="20">
     <circle cx="10" cy="10" r="10" fill="green" />
    </svg>

    <div id="orange" class="dot">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" width="20" height="20">
            <circle cx="10" cy="10" r="10" fill="orange" />
        </svg>
    </div>

    <div id="red" class="dot"></div>

    <script>
        $(function ready() {
            var dots = $(".dot")
            dots.on("mousedown touchstart", startDrag)

            var $doc
            var $dot
            var offsetX
            var offsetY

            function startDrag(event) {
                $doc = $(document)
                $doc.on("mousemove", drag)
                $doc.on("mouseup", stopDrag)
                $dot = $(event.target)
                var offset = $dot.offset()
                offsetX = offset.left - event.pageX
                offsetY = offset.top - event.pageY
            }

            function stopDrag(event) {
                $doc.off("mousemove mouseup")
            }


            function drag(event) {
                var left = event.pageX + offsetX
                var top = event.pageY + offsetY
                $dot.css({
                    left: left,
                    top: top
                })
            }
        })
    </script>

</body>
</html>