Возможно ли сделать веревку на SVG?

331

12 февраля 2017, 13:10

вот то, что делаю 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>

надо к нижнему краю штриховой вертикальной линии привязать конец "веревки" возможно ли сделать такую веревку на SVG и "привязать" её нужным концом к двигающейся точке так, чтобы длинна веревки сохранялась

Answer 1

ну в общем так: просто рисуется линия изогнутая, в атрибуте d="M800.0,145.18H90.5c-2.91,0-90,0-90-68.32C.5,0,92.5.5,92.5.5H800.0" M - длинна нижнего конца, H - длинна верхнего конца через javascript всё меняем

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