[set svg file on path with straight line]

1. am try to set svg file on path with straight line http://prntscr.com/k7xf57. any idea how to fixed this

2. number of svg will be increase and decrease and also size's of svg also change.

3.SVG file always start form centre of path.

See the Pen GBZLXe by kdpan (@kdpan) on CodePen

[Site will not working in safari]

http://varsitycart.presentation.site/index.php?route=design/patch sorry actually here is inner page link.

[Site will not working in safari]

hello everyone.

  I have website with lots of svg files. when we run website in safari browser site will not load properly. is there any solution regarding this.

here is my site link please find http://varsitycart.presentation.site/

[Drag svg file along with path]

okay thanks for reply 

[Drag svg file along with path]

drag path remain same position like shown in demo. and my drag handler will be svg selector not a "<g> selector" so we need to update svg x,y position's not a group "<g>"

[Drag svg file along with path]

22 hours ago, OSUblake said:

Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element.

 

See the Pen RBwWWm by osublake (@osublake) on CodePen

 

 

A couple threads on the technique.

 

Thanks for the reply.

 am trying as per your code but still svg not drag along the path.

 

 

 

[Drag svg file along with path]

22 hours ago, Rodrigo said:

Hi, I had to deal with something like this about a month ago.

 

First you forgot to include jQuery in the pen's resources.

 

Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny:

 

var bounds = document.getElementById("line2").getBBox();

var R = Draggable.create( "#patch_218_454", {
  type: "x,y",
  bounds:{
    minX: 0, maxX:bounds.width,
    minY:-5, maxY:bounds.height - 5
  },
  onDrag: function (e) {
    console.log(e.offsetX);
    console.log(R);
  }
});

 

Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that:

 

See the Pen aOzeNR by MAW (@MAW) on CodePen

Here in the docs, more specifically in the config object properties you'll find the trigger property.

 

https://greensock.com/docs/Utilities/Draggable

 

Hope this helps.

Happy Tweening!!!

Thanks for the reply

[Drag svg file along with path]

I am try to drag svg file along with a path are show on jacket shoulder white line. 

See the Pen NzmYMo by kdpan (@kdpan) on CodePen

[Draggable Bounds - Absolute values]

okay let me explain.  i have a jacket like this http://prntscr.com/k206iv. And on back side of jacket  a specific area where be drag svg file like  letter "A" with in area on back jacket.

[Draggable Bounds - Absolute values]

i have a jacket like this http://prntscr.com/k206iv. And on back side of jacket  a specific area where be drag svg file like  letter "A" with in area on back jacket.

See the Pen PaLBRx by kdpan (@kdpan) on CodePen