在JS中合并SVG多路径：React/Node白板应用SVG优化咨询

Great question—this is a super common pain point for vector whiteboard tools, especially when you’re dealing with persistent storage. Let’s break down practical JS-based solutions tailored to your React/Node stack:

1. Use a Mature SVG Path Manipulation Library #

The easiest way to merge overlapping paths and strip out invisible (covered) segments is to leverage a dedicated library. My go-to for this is @flatten-js/core—it’s pure JS (works in both browser and Node) and handles boolean path operations flawlessly.

Step-by-Step Example: #

First, install the library:

npm install @flatten-js/core

Then, process your paths to retain only visible segments:

const { Path, point } = require('@flatten-js/core');

// Assume this is your array of SVG path "d" attributes, ordered by drawing time (oldest first)
const rawPathDs = [
  "M10 10 L100 10 L100 100 L10 100 Z", // Background square (will be partially covered)
  "M20 20 L90 20 L90 90 L20 90 Z"      // Foreground square (covers inner part of the first)
];

// Convert each "d" string to a flatten-js Path object
const paths = rawPathDs.map(d => new Path(d));

// Process paths from top to bottom (last drawn = topmost) to retain only visible parts
let finalVisiblePath = paths.pop(); // Start with the topmost path

// Iterate backward through remaining paths, subtracting already covered areas
for (const path of paths.reverse()) {
  // Get only the part of the current path that isn't covered by higher paths
  const visibleSegment = path.subtract(finalVisiblePath);
  // Merge this visible segment into our final path
  finalVisiblePath = finalVisiblePath.union(visibleSegment);
}

// Convert the optimized path back to an SVG "d" string
const optimizedD = finalVisiblePath.toSVG();

// Now you can store this single "d" string in your database instead of multiple paths!

2. Manual Approach (If You Want to Avoid Dependencies) #

If you prefer to roll your own solution, you’ll need two core steps:

• Parse SVG path data: Convert the "d" attribute string into a structured array of points/commands.
• Simplify and merge paths: Use the Ramer-Douglas-Peucker algorithm to reduce redundant points, then apply boolean logic to remove covered segments.

Example Path Simplification (Ramer-Douglas-Peucker): #

// Basic implementation to simplify path points (adjust tolerance based on your needs)
function simplifyPath(points, tolerance = 1) {
  if (points.length <= 2) return points;

  let maxDistance = 0;
  let splitIndex = 0;
  const endIndex = points.length - 1;

  for (let i = 1; i < endIndex; i++) {
    const dist = perpendicularDistance(points[i], points[0], points[endIndex]);
    if (dist > maxDistance) {
      maxDistance = dist;
      splitIndex = i;
    }
  }

  if (maxDistance > tolerance) {
    const left = simplifyPath(points.slice(0, splitIndex + 1), tolerance);
    const right = simplifyPath(points.slice(splitIndex), tolerance);
    return left.slice(0, -1).concat(right);
  }
  return [points[0], points[endIndex]];
}

// Helper to calculate perpendicular distance from point to line
function perpendicularDistance(point, lineStart, lineEnd) {
  const dx = lineEnd.x - lineStart.x;
  const dy = lineEnd.y - lineStart.y;
  if (dx === 0 && dy === 0) return Math.hypot(point.x - lineStart.x, point.y - lineStart.y);
  return Math.abs(dy * point.x - dx * point.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x) / Math.hypot(dx, dy);
}

For boolean path operations (removing covered segments), you’d need to implement or adapt line intersection logic—this gets complex fast, so I only recommend this if you have strict dependency constraints.

3. Extra Storage Optimization Tips #

Once you have your merged path, you can shrink its footprint even more:

• Use relative coordinates: Convert absolute commands (e.g., L) to relative ones (e.g., l)—they’re often shorter since they reference the last point instead of absolute positions.
• Compress path strings: Strip unnecessary spaces, merge consecutive identical commands (e.g., L 10 20 L 30 40 becomes L 10 20 30 40), and use shorthand command codes.
• Compress serialized data: If storing path data as JSON, use gzip compression (via libraries like pako) and store the compressed data as a Base64 string—this can cut storage size by 50% or more.

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