如何在鼠标点击位置绘制svg多边形

在鼠标点击位置绘制SVG多边形，可以通过以下步骤实现：

首先，需要在HTML文档中创建一个SVG元素，用于容纳多边形的绘制。可以使用<svg>标签，并设置宽度和高度。
在JavaScript中，监听鼠标点击事件。可以使用addEventListener方法，绑定click事件到SVG元素上。
在点击事件的处理函数中，获取鼠标点击位置的坐标。可以使用event.clientX和event.clientY属性获取相对于浏览器窗口的坐标。
创建一个多边形元素，并设置其属性。可以使用<polygon>标签，并设置points属性为多边形的顶点坐标。
将多边形元素添加到SVG元素中，以便在页面上显示。可以使用appendChild方法将多边形元素添加到SVG元素中。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>绘制SVG多边形</title>
</head>
<body>
  <svg id="svg" width="500" height="500"></svg>

  <script>
    // 获取SVG元素
    var svg = document.getElementById('svg');

    // 监听鼠标点击事件
    svg.addEventListener('click', function(event) {
      // 获取鼠标点击位置的坐标
      var x = event.clientX;
      var y = event.clientY;

      // 创建多边形元素
      var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');

      // 设置多边形的顶点坐标
      var points = [
        (x - 10) + ',' + (y - 10),
        (x + 10) + ',' + (y - 10),
        x + ',' + (y + 10)
      ];
      polygon.setAttribute('points', points.join(' '));

      // 将多边形元素添加到SVG元素中
      svg.appendChild(polygon);
    });
  </script>
</body>
</html>

这段代码会在鼠标点击位置绘制一个以点击位置为中心的等边三角形。你可以根据需要修改多边形的顶点坐标和属性，以绘制不同形状的多边形。

关于SVG的更多信息和用法，你可以参考腾讯云的SVG介绍页面：SVG介绍。