javascript: 拖动路径元素使其不可用

Question

我的测试代码中有两个元素。一个封闭路径元素和一个矩形元素。我正在使用 svg.draggable.js 库来拖动这两个元素。矩形元素似乎可以很好地拖动，但当我单击它并尝试拖动它时，路径元素消失了。有人可以解释一下发生了什么以及如何使路径元素可拖动吗？

< body >
  <
  div id = "curve" >
  <
  /div> <
div id = "drawing" > < /div> <
script id = "jscript" >
  var r = SVG('drawing').size(500, 500);
var p = r.path().attr({
  id: 'path0',
  padding: '0px',
  fill: 'blue',
  d: 'M0 0 C100 120 150 120 150 100z',
  stroke: {
    color: 'black',
    width: 1,
    padding: '1px'
  }
}).draggable();

var b = r.rect().attr({
  id: 'rect0',
  x: 300,
  y: 300,
  height: 30,
  width: 30,
  fill: 'red'
}).draggable(); <
/script> < /
body >

<!DOCTYPE html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
  <script src="file:///C:/Users/angular2/Downloads/svg.draggable.js/dist/svg.draggable.js">
    <!-- It does not appear there is any cdns location for svg.draggable.js library online. You will need to download it and install it locally if you would like to test the code -->
  </script>
</head>

Answer 1

我通过创建嵌套组，将路径元素放入嵌套组，然后使嵌套组可拖动而不是单个元素来解决问题。

javascript: 拖动路径元素使其不可用

javascript: Dragging a path element makes it unavailable

javascript

svg

path

svg.js