如何为Delaunay三角剖分生成的SVG路径每条线段定义颜色？

要给Delaunay三角剖分得到的三角形每条边单独上色，核心问题是单个<path>元素的stroke属性会作用于整个路径，没法给其中某一段单独指定颜色。解决思路是把原来的闭合三角形路径拆分成独立的线段路径，或者保留填充路径的同时叠加带颜色的线段。

手动处理单三角形的方案 #

如果你只需要处理少量三角形，可以手动拆分路径：

方案1：保留填充+叠加彩色线段 #

如果需要保留原三角形的填充效果，我们可以：

• 保留原填充路径，但去掉它的描边（stroke="none"）；
• 新增3个独立的<path>元素，分别对应三角形的三条边，各自设置stroke颜色，同时把fill设为none避免填充。

示例代码：

<!-- 原填充路径，仅负责填充，去掉描边 -->
<path fill="rgba(232,232,232,255)" stroke="none" d="M179,108 L180,107 L183,113 L179,108" />
<!-- 第一条边：蓝色描边 -->
<path fill="none" stroke="blue" stroke-width="1" d="M179,108 L180,107" />
<!-- 第二条边：黑色描边（可自定义） -->
<path fill="none" stroke="black" stroke-width="1" d="M180,107 L183,113" />
<!-- 第三条边：红色描边 -->
<path fill="none" stroke="red" stroke-width="1" d="M183,113 L179,108" />

方案2：仅保留彩色线段（无填充） #

如果不需要填充效果，直接用3条独立的线段路径即可，无需保留原三角形路径：

<path fill="none" stroke="blue" stroke-width="1" d="M179,108 L180,107" />
<path fill="none" stroke="black" stroke-width="1" d="M180,107 L183,113" />
<path fill="none" stroke="red" stroke-width="1" d="M183,113 L179,108" />

批量处理大量三角形的脚本方案 #

如果有几百上千个三角形，手动拆分效率太低，可以用JavaScript自动处理：

// 获取SVG元素（假设你的SVG有id="triangulation-svg"）
const svg = document.getElementById('triangulation-svg');
// 遍历所有三角形路径
const trianglePaths = svg.querySelectorAll('path');

trianglePaths.forEach(triPath => {
  // 解析路径的坐标点
  const pathData = triPath.getAttribute('d');
  const pointSegments = pathData.split(' ').filter(seg => seg.trim() !== '');
  const points = pointSegments.map(seg => {
    // 提取坐标值（忽略M/L指令）
    const coords = seg.replace(/[ML]/, '').split(',').map(Number);
    return coords;
  });

  // 生成三条线段路径
  for (let i = 0; i < points.length - 1; i++) {
    const [x1, y1] = points[i];
    const [x2, y2] = points[i + 1];
    const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    
    linePath.setAttribute('d', `M${x1},${y1} L${x2},${y2}`);
    linePath.setAttribute('fill', 'none');
    linePath.setAttribute('stroke-width', '1');

    // 根据线段索引设置颜色（可自定义规则）
    if (i === 0) {
      linePath.setAttribute('stroke', 'blue');
    } else if (i === 2) {
      linePath.setAttribute('stroke', 'red');
    } else {
      linePath.setAttribute('stroke', 'black');
    }

    svg.appendChild(linePath);
  }

  // 隐藏原三角形路径（或直接删除）
  triPath.style.display = 'none';
});

这个脚本会自动解析每个三角形的坐标点，生成对应颜色的线段，最后隐藏原路径。你可以根据需求调整颜色规则，比如按线段位置、长度等设置不同颜色。

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