如何自动获取SVG多边形顶点并添加圆形手柄？

核心思路 #

直接通过JavaScript遍历SVG中的所有<polygon>元素，解析每个元素的points属性提取顶点坐标，然后为每个坐标生成一个<circle>元素作为手柄，插入到SVG中即可。这种方式无需手动操作，能批量处理数百个顶点。

具体实现代码 #

以下是原生JavaScript的实现示例，可直接在浏览器控制台或SVG所在页面的脚本中运行：

// 获取SVG文档中的所有polygon元素
const polygons = document.querySelectorAll('svg polygon');

// 定义手柄的样式参数
const handleRadius = 4;
const handleFill = '#fff';
const handleStroke = '#000';
const handleStrokeWidth = 1;

polygons.forEach(polygon => {
  // 解析points属性，分割成坐标数组
  const points = polygon.getAttribute('points').split(/[\s,]+/).filter(Boolean);
  // 获取polygon的父元素（通常是SVG），用于插入手柄
  const parent = polygon.parentNode;

  // 遍历坐标，每两个值为一组（x,y）
  for (let i = 0; i < points.length; i += 2) {
    const x = parseFloat(points[i]);
    const y = parseFloat(points[i + 1]);

    // 创建圆形手柄元素（SVG元素需使用命名空间创建）
    const handle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    // 设置手柄属性
    handle.setAttribute('cx', x);
    handle.setAttribute('cy', y);
    handle.setAttribute('r', handleRadius);
    handle.setAttribute('fill', handleFill);
    handle.setAttribute('stroke', handleStroke);
    handle.setAttribute('stroke-width', handleStrokeWidth);
    // 给手柄添加类名，方便后续样式调整或交互扩展
    handle.classList.add('vertex-handle');

    // 将手柄插入到父元素中
    parent.appendChild(handle);
  }
});

代码说明 #

1. 获取多边形元素：通过document.querySelectorAll('svg polygon')选中所有目标多边形。
2. 解析顶点坐标：利用正则分割points属性的值，过滤空字符串后得到纯坐标数组，再按顺序两两分组得到每个顶点的(x,y)。
3. 创建手柄元素：SVG元素需要使用命名空间创建，因此用createElementNS生成<circle>，并设置位置、大小和样式属性。
4. 插入手柄：将生成的圆形手柄添加到多边形的父元素（一般是SVG）中，确保手柄能正确显示在多边形区域内。

可选优化 #

• 如果需要手柄显示在多边形上方，可以给手柄添加style="pointer-events: all;"，或通过调整插入顺序确保绘制优先级。
• 若要支持手柄拖动修改顶点，可给vertex-handle类添加mousedown/touchstart事件监听，联动更新对应多边形的points属性。

内容的提问来源于stack exchange，提问作者marklovin