使用SVGPathInterpolator将SVG转x,y坐标脚本无输出，求解决

先理清报错根源 #

「Unexpected token 'i', "import SVG"... is not valid JSON」这个错误，基本是两种情况导致：

• 你用require()加载了用ES模块语法（import）编写的脚本，Node.js误将其当作JSON文件解析，直接触发语法错误。
• 脚本里直接调用了浏览器专属的SVG DOM对象，Node.js环境不存在这些对象，导致代码执行异常。

脚本能不能在Node.js跑？ #

可以，但需要做环境适配：

1. 调整模块格式：要么把脚本改成CommonJS语法（用require替代import），要么在项目根目录的package.json里添加"type": "module"，让Node.js支持ES模块。
2. 补全SVG解析环境：Node.js没有浏览器的SVG解析能力，得借助第三方库（比如svgson、xmldom）读取并提取SVG里的路径d属性，再传给SVGPathInterpolator处理。

给个Node.js适配的示例代码：

// 先安装依赖：npm install svgson svg-path-interpolator
import svgson from 'svgson';
import SVGPathInterpolator from 'svg-path-interpolator';
import fs from 'fs';

// 读取本地SVG文件
const svgContent = fs.readFileSync('./target.svg', 'utf8');

// 解析SVG并提取path的d属性
svgson.parse(svgContent, (err, jsonData) => {
  if (err) throw err;
  const pathItem = jsonData.children.find(item => item.name === 'path');
  if (!pathItem) {
    console.log('SVG文件中未找到path元素');
    return;
  }
  const pathD = pathItem.attributes.d;
  
  // 生成笛卡尔坐标点
  const interpolator = new SVGPathInterpolator(pathD);
  const points = interpolator.getPoints(100); // 生成100个采样点
  // 输出坐标文本
  points.forEach(point => console.log(`${point.x}, ${point.y}`));
});

网页实现的正确步骤 #

如果选择在浏览器环境运行，按以下步骤来：

1. 新建HTML文件，引入SVGPathInterpolator（可以用本地npm包的编译文件）
2. 通过文件选择器读取本地SVG，用浏览器的DOMParser解析提取路径
3. 实例化SVGPathInterpolator生成坐标并输出

示例代码：

<!DOCTYPE html>
<html>
<body>
  <input type="file" id="svgSelector" accept="image/svg+xml">
  <pre id="coordinateOutput"></pre>

  <script src="node_modules/svg-path-interpolator/dist/svg-path-interpolator.min.js"></script>
  <script>
    document.getElementById('svgSelector').addEventListener('change', (e) => {
      const file = e.target.files[0];
      const reader = new FileReader();
      
      reader.onload = (event) => {
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(event.target.result, 'image/svg+xml');
        const pathEl = svgDoc.querySelector('path');
        
        if (!pathEl) {
          document.getElementById('coordinateOutput').textContent = 'SVG中未找到路径元素';
          return;
        }
        
        const pathD = pathEl.getAttribute('d');
        const interpolator = new SVGPathInterpolator(pathD);
        const points = interpolator.getPoints(100);
        const outputText = points.map(p => `${p.x}, ${p.y}`).join('\n');
        
        document.getElementById('coordinateOutput').textContent = outputText;
      };
      
      reader.readAsText(file);
    });
  </script>
</body>
</html>

之前脚本无输出的原因 #

要么是脚本里没写输出逻辑（比如没调用console.log、没更新页面DOM），要么是Node.js环境下因为缺失DOM对象，代码执行到某一步就终止，没走到输出环节。

内容的提问来源于stack exchange，提问作者Bryan-StackExchange