Search code examples
javascriptsvgpathsvg.js

javascript: Dragging a path element makes it unavailable

I have two elements in my test code. A closed path element and a rect element. I am using the svg.draggable.js library to drag both elements. The rect element appears to drag fine but the path element disappears when I click on it and try to drag it. Can somebody please explain what's going on and how I can make the path element draggable?

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

Solution

  • I was able the solve the problem by creating a nested group, putting the path element in the nested group, and then making the nested group draggable rather than the individual element.