SVG not render properly

I am working on rendering the SVG file in the three js. A take help of the tiger example https://threejs.org/examples/#webgl_loader_svg it works fine tiger SVG but it doesn’t work with my SVG.
WIth my SVG file, there is a black box comes in, it can not understand what is it and how to correct it

SVG file I need to render: https://drive.google.com/file/d/1gEXsJ2gql_NMOEMJpQwUCgMkYQNBDqHr/view?usp=sharing

Any help will be appreciated.
image

       loader.load(

        // resource URL

        'svg/Img2.svg',

        //'https://svgshare.com/i/H53.svg',

        // called when the resource is loaded

        function (data) {

            var paths = data.paths;

            var group = new THREE.Group();

            group.position.x = - 70;

            group.position.y = 0;

            group.scale.y *= - 5;

            for (var i = 0; i < paths.length; i++) {

                var path = paths[i];

                var fillColor = path.userData.style.fill;

                //if (guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none') {

                if (true && fillColor !== undefined && fillColor !== 'none') {

                    var material = new THREE.MeshBasicMaterial({

                        color: new THREE.Color().setStyle(fillColor),

                        opacity: path.userData.style.fillOpacity,

                        transparent: path.userData.style.fillOpacity < 1,

                        side: THREE.DoubleSide,

                        depthWrite: false,

                        wireframe: false

                    });

                    var shapes = path.toShapes(true);

                    for (var j = 0; j < shapes.length; j++) {

                        var shape = shapes[j];

                        var geometry = new THREE.ShapeBufferGeometry(shape);

                        var mesh = new THREE.Mesh(geometry, material);

                        group.add(mesh);

                    }

                }

                var strokeColor = path.userData.style.stroke;

                //if (guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none') {

                if (true && strokeColor !== undefined && strokeColor !== 'none') {

                    var material = new THREE.MeshBasicMaterial({

                        color: new THREE.Color().setStyle(strokeColor),

                        opacity: path.userData.style.strokeOpacity,

                        transparent: path.userData.style.strokeOpacity < 1,

                        side: THREE.DoubleSide,

                        depthWrite: false,

                        wireframe: false

                    });

                    for (var j = 0, jl = path.subPaths.length; j < jl; j++) {

                        var subPath = path.subPaths[j];

                        debugger

                        var geometry = THREE.SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style);

                        if (geometry) {

                            var mesh = new THREE.Mesh(geometry, material);

                            group.add(mesh);

                        }

                    }

                }

            }

            scene.add(group);

            //group.scale.set(4,4,4)

            //svgGroup.position.y = 10;

        },

        // called when loading is in progresses

        function (xhr) {

            console.log((xhr.loaded / xhr.total * 100) + '% loaded');

        },

        // called when loading has errors

        function (error) {

            console.log('An error happened');

        }

    );`Preformatted text`

The problem can be how you construct the SVG, try to do things simple and try diferent things and you will know the limitations of SVGLoader.

The masks can be a problem, try not to do so much masks.

svg
stock-main

result:

it’s not a really complicated SVG by the way

SOLUTION IS IN THE FOLLOING LINK

UPDATE, the last stackoverflow link solves my problem temporary