Update webgl_loader_svg.html (#26114)

* Update webgl_loader_svg.html

* ci re-run

* Update webgl_loader_svg.html

---------

Co-authored-by: Michael Herzog <[email protected]>

examples/webgl_loader_svg.html

@@ -162,19 +162,18 @@
 
 				loader.load( url, function ( data ) {
 
-					const paths = data.paths;
-
 					const group = new THREE.Group();
 					group.scale.multiplyScalar( 0.25 );
 					group.position.x = - 70;
 					group.position.y = 70;
 					group.scale.y *= - 1;
+					
+					let renderOrder = 0;
 
-					for ( let i = 0; i < paths.length; i ++ ) {
-
-						const path = paths[ i ];
+					for ( const path of data.paths ) {
 
 						const fillColor = path.userData.style.fill;
+
 						if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) {
 
 							const material = new THREE.MeshBasicMaterial( {
@@ -188,12 +187,11 @@
 
 							const shapes = SVGLoader.createShapes( path );
 
-							for ( let j = 0; j < shapes.length; j ++ ) {
-
-								const shape = shapes[ j ];
+							for ( const shape of shapes ) {
 
 								const geometry = new THREE.ShapeGeometry( shape );
 								const mesh = new THREE.Mesh( geometry, material );
+								mesh.renderOrder = renderOrder ++;
 
 								group.add( mesh );
 
@@ -214,15 +212,14 @@
 								wireframe: guiData.strokesWireframe
 							} );
 
-							for ( let j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
-
-								const subPath = path.subPaths[ j ];
+							for ( const subPath of path.subPaths ) {
 
 								const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
 
 								if ( geometry ) {
 
 									const mesh = new THREE.Mesh( geometry, material );
+									mesh.renderOrder = renderOrder ++;
 
 									group.add( mesh );
 
@@ -248,6 +245,7 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				render();
 
 			}