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

【问题标题】：<svg> element fails to move when its position is updated during a mouse event<svg> 元素在鼠标事件期间更新其位置时无法移动
【发布时间】：2015-05-12 22:23:38
【问题描述】：

当调用来自鼠标事件内部时，设置svg 元素或包含svg 元素的div 的left 和top 属性失败。

我创建了一个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>

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

你想要this 而不是event.target：

$dot = $(this)

Fiddle

event.target 引用了启动事件的 DOM 元素，在您的例子中是 SVG 中的 <circle>。

另一方面，jQuery 事件处理程序中的this 引用了已附加处理程序的DOM 元素，即触发事件的.dot 元素。

【讨论】：

我愿意！你说的对。谢谢你的澄清。现在一切都说得通了。