Three JS SVG Renderer with grid and transparent surfaces - svg

Question

I am trying to render SVG Files with threeJS. As PNG files don't look pretty nice I am using now the SVGRenderer.
My SVG Files looks sth like this:
When I render the Image it appears to be completely black (the colour I have chosen though)
I found the option to render it as a wireframe, but that shows some framelines I don't want to see
My JS looks like this:
var loader = new THREE.SVGLoader();
loader.load( 'media/qpartdark/SVG/qpart2.svg', function ( paths ) {
var group = new THREE.Group();
group.scale.multiplyScalar( 0.25 );
group.position.x = - 70;
group.position.y = 0;
group.position.z = 0;
group.scale.y *= -1;
for ( var i = 0; i < paths.length; i ++ ) {
var path = paths[ i ];
var material = new THREE.MeshBasicMaterial( {
color: path.color,
side: THREE.DoubleSide,
depthWrite: false,
wireframe: false,
wireframeLinewidth: 0.01
} );
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 );
}
}
scene.add( group );
} );
//
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Do you have any hints how I can render the svg as in the example?
here is the original SVG: