Problem to export the map to SVG

[haxakl]

Hello everyone!

I need some help to export a map shown with Mapbox to svg.

It's working pretty well as you can see below. The only problem is the blue mask (Multipolygon case), even if i put the fill-rule. Someone already tried to export ? Or if someone can help me. 🙏🙏

Map shown:

SVG Result

Here the code.

Export function:

const handleGenerateMap = () => {
  if (mapRef.current) {
    // Capturez l'image de la carte et générez un fichier EPS
    const features = mapRef.current.queryRenderedFeatures().reverse();
    // const svg = mapCanvasToSvg(mapCanvas);
    const svg = mapFeaturesToSvg(
      features,
      mapRef.current,
      actualTheme.color2,
      mapRef.current.getZoom()
    );
    const blob = new Blob([svg], { type: "image/svg+xml" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "map.svg";
    link.click();
  }
};

Export function:

const processGeometry = (
  coordinates: any,
  type: string,
  map: MapRef,
  layer: any
) => {
  let svgElements = "";
  
  const getPathData = (coords: any) => {
    return coords
      .map((coord: any) => {
        const point = map.project({
          lat: coord[1],
          lng: coord[0],
        });
        return `${point.x},${point.y}`;
      })
      .join(" ");
  };

  switch (type) {
    case "Polygon": [...] break;

    case "MultiPolygon":
      coordinates.forEach((coords: any) => {
        coords.forEach((coords2: any) => {
          const pathData = getPathData(coords2);
          svgElements += `<polygon 
            points="${pathData}"
            fill="${rgbaToHex(layer.paint["fill-color"])}"
            fill-opacity="${layer.paint["fill-opacity"] || layer.paint["fill-color"]?.a || 1}"
            fill-rule="evenodd"
          />`;
        });
      });
      break;

    case "MultiLineString": [...] break;

    case "LineString": [...] break;
  }

  return svgElements;
};