SVG Loader: Accept multiple transforms in a single node

examples/js/loaders/SVGLoader.js

@@ -756,16 +756,22 @@ THREE.SVGLoader.prototype = {
 
 		function parseTransformNode( node ) {
 
-			var transformAttr = node.getAttribute( 'transform' );
 			var transform = null;
-			var openParPos = transformAttr.indexOf( "(" );
-			var closeParPos = transformAttr.indexOf( ")" );
+			var transformsTexts = node.getAttribute( 'transform' ).split( ' ' );
+			
+			for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex-- ) {
+
+				var newTransform = null;
+
+				var transformText = transformsTexts[ tIndex ];
+				var openParPos = transformText.indexOf( "(" );
+				var closeParPos = transformText.indexOf( ")" );
 
 				if ( openParPos > 0 && openParPos < closeParPos ) {
 
-				var transformType = transformAttr.substr( 0, openParPos );
+					var transformType = transformText.substr( 0, openParPos );
 
-				var array = parseFloats( transformAttr.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
+					var array = parseFloats( transformText.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
 
 					switch ( transformType ) {
 
@@ -773,7 +779,7 @@ THREE.SVGLoader.prototype = {
 
 							if ( array.length >= 1 ) {
 
-							transform = new THREE.Matrix3();
+								newTransform = new THREE.Matrix3();
 
 								var tx = array[ 0 ];
 								var ty = tx;
@@ -784,7 +790,7 @@ THREE.SVGLoader.prototype = {
 
 								}
 
-							transform.translate( tx, ty );
+								newTransform.translate( tx, ty );
 
 							}
 
@@ -798,7 +804,7 @@ THREE.SVGLoader.prototype = {
 								var cx = 0;
 								var cy = 0;
 
-							transform = new THREE.Matrix3();
+								newTransform = new THREE.Matrix3();
 
 								// Angle
 								angle = - array[ 0 ] * Math.PI / 180;
@@ -816,7 +822,7 @@ THREE.SVGLoader.prototype = {
 								tempTransform2.identity().rotate( angle );
 								tempTransform3.multiplyMatrices( tempTransform2, tempTransform1 );
 								tempTransform1.identity().translate( cx, cy );
-							transform.multiplyMatrices( tempTransform1, tempTransform3 );
+								newTransform.multiplyMatrices( tempTransform1, tempTransform3 );
 
 							}
 
@@ -826,7 +832,7 @@ THREE.SVGLoader.prototype = {
 
 							if ( array.length >= 1 ) {
 
-							transform = new THREE.Matrix3();
+								newTransform = new THREE.Matrix3();
 
 								var scaleX = array[ 0 ];
 								var scaleY = scaleX;
@@ -835,7 +841,7 @@ THREE.SVGLoader.prototype = {
 									scaleY = array[ 1 ];
 								}
 
-							transform.scale( scaleX, scaleY );
+								newTransform.scale( scaleX, scaleY );
 
 							}
 
@@ -845,9 +851,9 @@ THREE.SVGLoader.prototype = {
 
 							if ( array.length === 1 ) {
 
-							transform = new THREE.Matrix3();
+								newTransform = new THREE.Matrix3();
 
-							transform.set(
+								newTransform.set(
 									1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
 									0, 1, 0,
 									0, 0, 1
@@ -861,9 +867,9 @@ THREE.SVGLoader.prototype = {
 
 							if ( array.length === 1 ) {
 
-							transform = new THREE.Matrix3();
+								newTransform = new THREE.Matrix3();
 
-							transform.set(
+								newTransform.set(
 									1, 0, 0,
 									Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
 									0, 0, 1
@@ -877,9 +883,9 @@ THREE.SVGLoader.prototype = {
 
 							if ( array.length === 6 ) {
 
-							transform = new THREE.Matrix3();
+								newTransform = new THREE.Matrix3();
 
-							transform.set(
+								newTransform.set(
 									array[ 0 ], array[ 2 ], array[ 4 ],
 									array[ 1 ], array[ 3 ], array[ 5 ],
 									0, 0, 1
@@ -892,6 +898,20 @@ THREE.SVGLoader.prototype = {
 
 				}
 
+				if ( newTransform ) {
+
+					if ( transform ) {
+					
+						newTransform.multiply( transform );
+					
+					}
+
+					transform = newTransform;
+
+				}
+
+			}
+
 			return transform;
 
 		}