У меня есть элемент svg:
<svg id="map" width="500" heigh="500"> </svg>
Я могу добавить новую строку в этот svg tag, используя следующий код:
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('x1', 100);
newLine.setAttribute('y1', 200);
newLine.setAttribute('x2', 200);
newLine.setAttribute('y2', 200);
$("#map").append(newLine);
, если вы посмотрите на код выше, вы увидите, что у меня жестко заданы координаты, и я сам набрал x1,y1 и x2,y2.
Он успешно нарисовал aws строку внутри тега svg, используя предоставленные координаты.
Теперь, что мне нужно для этого пользователь должен уметь провести линию самостоятельно. что-то вроде windows приложение рисования, где пользователь dr aws линия.
Пользователь должен иметь возможность щелкнуть внутри svg и нарисовать прямую линию. поэтому эти координаты должны предоставляться динамически в зависимости от действий пользователя.
Как я могу это сделать? Буду признателен за любые подсказки.