Svg unnecessary fill with color

SVG_compund_test_02_michael
this is my svg when I am trying to upload this then there is some rendering issue the circle’s get filled completely i don’t know the reason behind that.Can anyone please help me with that. It looks something like this

layerData.paths.forEach((path) => {
const pathColor = new THREE.Color();
if (path.userData?.style?.stroke) {
pathColor.setStyle(path.userData.style.stroke);
} else if (path.userData?.style?.fill && path.userData.style.fill !== ‘none’) {
pathColor.setStyle(path.userData.style.fill);
}

const material = MaterialFactory.createMaterial(
  pathColor,
  materialProperties,
  isBackLayer,
  zOffset,
  currentEnvironment,
  texture
);

path.subPaths.forEach((subPath) => {
  const points = subPath.getPoints();
  if (!points?.length) return;

  const geometry = GeometryFactory.createGeometry(points);

  let mesh: THREE.Mesh;
  if (meshIndex < meshPool.length) {
    mesh = meshPool[meshIndex];
    mesh.geometry = geometry;
    mesh.material = material;
  } else {
    mesh = new THREE.Mesh(geometry, material);
    meshPool.push(mesh);
  }
  meshIndex++;

  if (isBackLayer) {
    mesh.scale.x = -1;
    mesh.position.x = 245;
  }
  mesh.position.z = zPosition;
  group.add(mesh);
});

});

Without seeing the code for the SVG itself it’s hard to tell, as the issue is most likely within it.

It would also be helpful for you to set up a codepen / jsfiddle that demonstrates the issue so that we can see your code running and modify it.