时间戳

首页 > 解决方案 > 用户可以在 svg 元素上画一条线

javascript - 用户可以在 svg 元素上画一条线

问题描述

我有一个 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。它使用提供的坐标成功地在标签
内绘制了一条线。 现在我需要做的是，用户必须能够自己画线。类似于 Windows 绘画应用程序，用户在其中画一条线。 用户必须能够在 svg 内单击并绘制一条直线。因此必须根据用户操作动态提供这些坐标。 我怎样才能做到这一点？我会很感激任何提示。svg


标签： javascripthtmljquerysvg

解决方案

推荐阅读