如何将XY坐标转换为SVG可识别格式以生成路径动画？

你可以通过两种核心方式将XY坐标转换为SVG支持的格式，适配闭合图形需求，以下是具体实现方法：

一、使用<polygon>元素（对应你提供的示例写法） #

SVG的<polygon>通过points属性定义顶点，格式规则简单直接：

• 每组XY坐标用逗号分隔，比如x1,y1
• 不同坐标组之间用空格分隔
• 闭合图形无需重复第一个坐标，SVG会自动连接最后一个点与起始点

坐标转换函数（JavaScript） #

如果你的坐标是二维数组格式（比如const coords = [[65.7,0], [0,64.4], ...]），可以用下面的函数生成符合要求的points字符串：

function generatePolygonPoints(coords) {
  return coords.map(coord => coord.join(',')).join(' ');
}

将生成的字符串直接赋值给<polygon>的points属性即可，和你示例中的写法完全匹配。

二、使用<path>元素（更灵活的路径方案） #

如果需要更复杂的路径控制，可使用<path>元素，通过路径指令描述图形：

• M x1 y1：移动到起始坐标点
• 后续每个坐标用L xn yn：绘制直线到该点
• 最后添加Z：自动闭合路径

坐标转换函数（JavaScript） #

function generatePathD(coords) {
  if (coords.length === 0) return '';
  // 起始点用M指令
  let d = `M ${coords[0][0]} ${coords[0][1]}`;
  // 剩余点用L指令连接
  for (let i = 1; i < coords.length; i++) {
    d += ` L ${coords[i][0]} ${coords[i][1]}`;
  }
  // 闭合路径
  d += ' Z';
  return d;
}

生成的字符串可直接放入<path>的d属性中，示例：

<path d="M 65.7 0 L 0 64.4 L 34.9 69.8 ... Z" />

三、复用描边动画效果 #

无论使用<polygon>还是<path>，你提供的CSS动画都能直接复用，仅需调整选择器：

• 若使用<path>，将CSS中的svg polygon改为svg path即可

完整动态生成示例 #

<svg x="0px" y="0px" width="150px" height="145px" viewBox="0 0 148.9 140.8">
  <polygon id="dynamicPolygon" />
</svg>

<style>
svg polygon {
  fill: none;
  stroke: #09d;
  stroke-width: 3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

<script>
// 自定义XY坐标数组
const myCoords = [
  [65.7,0], [0,64.4], [34.9,69.8], [30.9,140.8],
  [67.1,138.2], [67.1,96.6], [87.2,95.2], [91.2,140.8],
  [127.4,132.8], [120.7,75.1], [148.9,69.8], [116.7,40.2],
  [122.1,4], [99.3,1.3], [99.3,22.8]
];

// 生成points并赋值给多边形
const polygon = document.getElementById('dynamicPolygon');
polygon.setAttribute('points', generatePolygonPoints(myCoords));

// 坐标转换函数
function generatePolygonPoints(coords) {
  return coords.map(coord => coord.join(',')).join(' ');
}
</script>

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