SVGLoader: Basic style.fill support.

examples/js/loaders/SVGLoader.js

@@ -28,17 +28,7 @@ THREE.SVGLoader.prototype = {
 
 	parse: function ( text ) {
 
-		function parseNodes( nodes ) {
-
-			for ( var i = 0; i < nodes.length; i ++ ) {
-
-				parseNode( nodes[ i ] );
-
-			}
-
-		}
-
-		function parseNode( node ) {
+		function parseNode( node, style ) {
 
 			if ( node.nodeType !== 1 ) return;
 
@@ -48,34 +38,35 @@ THREE.SVGLoader.prototype = {
 					break;
 
 				case 'g':
+					parseStyle( node, style );
 					break;
 
 				case 'path':
-					paths.push( parsePathNode( node ) );
+					paths.push( parsePathNode( node, style ) );
 					break;
 
 				case 'rect':
-					paths.push( parseRectNode( node ) );
+					paths.push( parseRectNode( node, style ) );
 					break;
 
 				case 'polygon':
-					paths.push( parsePolygonNode( node ) );
+					paths.push( parsePolygonNode( node, style ) );
 					break;
 
 				case 'polyline':
-					paths.push( parsePolylineNode( node ) );
+					paths.push( parsePolylineNode( node, style ) );
 					break;
 
 				case 'circle':
-					paths.push( parseCircleNode( node ) );
+					paths.push( parseCircleNode( node, style ) );
 					break;
 
 				case 'ellipse':
-					paths.push( parseEllipseNode( node ) );
+					paths.push( parseEllipseNode( node, style ) );
 					break;
 
 				case 'line':
-					paths.push( parseLineNode( node ) );
+					paths.push( parseLineNode( node, style ) );
 					break;
 
 				default:
@@ -83,14 +74,20 @@ THREE.SVGLoader.prototype = {
 
 			}
 
-			parseNodes( node.childNodes );
+			var nodes = node.childNodes;
+
+			for ( var i = 0; i < nodes.length; i ++ ) {
+
+				parseNode( nodes[ i ], style );
+
+			}
 
 		}
 
-		function parsePathNode( node ) {
+		function parsePathNode( node, style ) {
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( parseFill( node ) );
+			path.color.setStyle( parseFill( node, style ) );
 
 			var point = new THREE.Vector2();
 			var control = new THREE.Vector2();
@@ -325,7 +322,7 @@ THREE.SVGLoader.prototype = {
 
 		}
 
-		function parseRectNode( node ) {
+		function parseRectNode( node, style ) {
 
 			var x = parseFloat( node.getAttribute( 'x' ) );
 			var y = parseFloat( node.getAttribute( 'y' ) );
@@ -333,7 +330,7 @@ THREE.SVGLoader.prototype = {
 			var h = parseFloat( node.getAttribute( 'height' ) );
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( parseFill( node ) );
+			path.color.setStyle( parseFill( node, style ) );
 			path.moveTo( x, y );
 			path.lineTo( x + w, y );
 			path.lineTo( x + w, y + h );
@@ -342,7 +339,7 @@ THREE.SVGLoader.prototype = {
 
 		}
 
-		function parsePolygonNode( node ) {
+		function parsePolygonNode( node, style ) {
 
 			function iterator( match, a, b ) {
 
@@ -362,7 +359,7 @@ THREE.SVGLoader.prototype = {
 			var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( parseFill( node ) );
+			path.color.setStyle( parseFill( node, style ) );
 
 			var index = 0;
 
@@ -374,7 +371,7 @@ THREE.SVGLoader.prototype = {
 
 		}
 
-		function parsePolylineNode( node ) {
+		function parsePolylineNode( node, style ) {
 
 			function iterator( match, a, b ) {
 
@@ -394,7 +391,7 @@ THREE.SVGLoader.prototype = {
 			var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( parseFill( node ) );
+			path.color.setStyle( parseFill( node, style ) );
 
 			var index = 0;
 
@@ -406,7 +403,7 @@ THREE.SVGLoader.prototype = {
 
 		}
 
-		function parseCircleNode( node ) {
+		function parseCircleNode( node, style ) {
 
 			var x = parseFloat( node.getAttribute( 'cx' ) );
 			var y = parseFloat( node.getAttribute( 'cy' ) );
@@ -416,14 +413,14 @@ THREE.SVGLoader.prototype = {
 			subpath.absarc( x, y, r, 0, Math.PI * 2 );
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( parseFill( node ) );
+			path.color.setStyle( parseFill( node, style ) );
 			path.subPaths.push( subpath );
 
 			return path;
 
 		}
 
-		function parseEllipseNode( node ) {
+		function parseEllipseNode( node, style ) {
 
 			var x = parseFloat( node.getAttribute( 'cx' ) );
 			var y = parseFloat( node.getAttribute( 'cy' ) );
@@ -434,14 +431,14 @@ THREE.SVGLoader.prototype = {
 			subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( parseFill( node ) );
+			path.color.setStyle( parseFill( node, style ) );
 			path.subPaths.push( subpath );
 
 			return path;
 
 		}
 
-		function parseLineNode( node ) {
+		function parseLineNode( node, style ) {
 
 			var x1 = parseFloat( node.getAttribute( 'x1' ) );
 			var y1 = parseFloat( node.getAttribute( 'y1' ) );
@@ -457,7 +454,15 @@ THREE.SVGLoader.prototype = {
 
 		}
 
-		function parseFill( node ) {
+		//
+
+		function parseStyle( node, style ) {
+
+			style.fill = node.style.fill;
+
+		}
+
+		function parseFill( node, style ) {
 
 			if ( node.hasAttribute( 'fill' ) ) {
 
@@ -465,6 +470,12 @@ THREE.SVGLoader.prototype = {
 
 			}
 
+			if ( style.fill !== '' ) {
+
+				return style.fill;
+
+			}
+
 			return '#ffffff';
 
 		}
@@ -499,7 +510,7 @@ THREE.SVGLoader.prototype = {
 
 		var paths = [];
 
-		parseNode( svg );
+		parseNode( svg, {} );
 
 		return paths;
 

examples/webgl_loader_svg.html

@@ -117,6 +117,7 @@
 				//
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.screenSpacePanning = true;
 
 				//