This is what I do http://codepen.io/cache0/pen/rjQwZJ

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="500"> <path stroke="white" fill="none" id="bezier-path" stroke-width="1.2" d="M500,500 C500,224 500,151 500,0 " stroke-dasharray="4 2"/> </svg>

it is necessary to tie the end of the "rope" to the lower edge of the dashed vertical line enter image description here Is it possible to make such a rope on SVG and "tie" it with the right end to a moving point so that the rope is kept

  • sobsna :) SVG does not support the drag and drop function. And the rope can be drawn, easily and even annotated. - Alexandr_TT

1 answer 1

Well, in general: just a curved line is drawn, in the attribute d = "M800.0,145.18H90.5c-2.91.0-90.0-90-68.32C.5,0,92.5.5,92.5.5H800.0" M - the length of the lower end, H - the length of the upper end through javascript we change everything

 linia.setAttribute("d", "M"+(curX+500).toFixed(0)+",500 C500,224 500,151 500,0 "); linia2.setAttribute("d", "M"+(750-((curX+500).toFixed(0)))+",145.18H90.5c-2.91,0-90,0-90-68.32C.5,0,92.5.5,92.5.5H"+(curX+500).toFixed(0));

and all! thanks to everybody, you're free