如何替换粒子Logo效果的SVG图片？修改URL后无显示求助

问题原因 #

1. 路径获取不完整：原代码仅提取SVG根节点下的path元素，但Vynl Logo的SVG将路径嵌套在<g>分组内，导致无法获取到所有路径数据。
2. 坐标适配错误：Vynl Logo的SVG视图框（viewBox）与原Riot Logo差异极大，原代码的坐标计算逻辑无法适配新SVG的尺寸，导致粒子检测不到路径内的点。

修复步骤 #

1. 递归获取所有SVG路径 #

修改loadSVG函数，递归遍历SVG文档中的所有path元素，确保不遗漏嵌套路径：

async function loadSVG(url) {
  const response = await fetch(url);
  const text = await response.text();
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(text, "image/svg+xml");
  
  // 递归遍历所有子元素，收集path
  const getAllPaths = (element) => {
    let paths = [];
    if (element.tagName === 'path') paths.push(element);
    Array.from(element.children).forEach(child => {
      paths = paths.concat(getAllPaths(child));
    });
    return paths;
  };
  
  const paths = getAllPaths(xmlDoc.documentElement);
  return paths.map(path => path.getAttribute("d"));
}

2. 动态适配SVG视图框 #

重写init函数中的坐标计算逻辑，基于SVG的viewBox动态缩放和定位粒子，确保Logo在canvas中居中显示：

async function init() {
  particlesArray = [];
  const svgUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/48/Vynl_Logo_SVG.svg';
  const svgPaths = await loadSVG(svgUrl);

  // 获取SVG的viewBox参数
  const svgResponse = await fetch(svgUrl);
  const svgText = await svgResponse.text();
  const xmlDoc = parser.parseFromString(svgText, "image/svg+xml");
  const svgElement = xmlDoc.documentElement;
  const viewBox = svgElement.getAttribute('viewBox').split(' ').map(Number);
  const [svgMinX, svgMinY, svgWidth, svgHeight] = viewBox;

  let allPositions = [];
  // 计算缩放比例：按canvas最小边适配，留20%边距
  const scale = Math.min(canvas.width / svgWidth, canvas.height / svgHeight) * 0.8;
  // 计算居中偏移量
  const offsetX = (canvas.width - svgWidth * scale) / 2 - svgMinX * scale;
  const offsetY = (canvas.height - svgHeight * scale) / 2 - svgMinY * scale;

  svgPaths.forEach(pathData => {
    const path = new Path2D(pathData);
    // 遍历SVG视图范围内的点，检测是否在路径内
    for (let y = svgMinY; y < svgMinY + svgHeight; y += particleSpacing) {
      for (let x = svgMinX; x < svgMinX + svgWidth; x += particleSpacing) {
        if (ctx.isPointInPath(path, x, y)) {
          // 缩放并偏移坐标到canvas中心
          const scaledX = x * scale + offsetX;
          const scaledY = y * scale + offsetY;
          allPositions.push({x: scaledX, y: scaledY});
        }
      }
    }
  });

  allPositions.forEach(pos => {
    particlesArray.push(new Particle(pos.x, pos.y));
  });
}

3. 调整粒子颜色（可选） #

Vynl Logo为黑色，可修改粒子颜色匹配风格：

class Particle {
  constructor(x, y) {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = particleSize;
    this.color = '#000000'; // 替换为黑色
    this.baseX = x;
    this.baseY = y;
    this.density = (Math.random() * 30) + 1;
  }
  // ...其他方法不变
}

验证效果 #

替换SVG URL后运行代码，粒子将正确渲染Vynl Logo的形状，同时保留鼠标交互的扩散效果，窗口大小变化时也会自动重新居中适配。

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