SVG Loader: Accept multiple transforms in a single node

examples/js/loaders/SVGLoader.js

@@ -756,138 +756,158 @@ 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-- ) {
 
-			if ( openParPos > 0 && openParPos < closeParPos ) {
+				var newTransform = null;
 
-				var transformType = transformAttr.substr( 0, openParPos );
+				var transformText = transformsTexts[ tIndex ];
+				var openParPos = transformText.indexOf( "(" );
+				var closeParPos = transformText.indexOf( ")" );
 
-				var array = parseFloats( transformAttr.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
+				if ( openParPos > 0 && openParPos < closeParPos ) {
 
-				switch ( transformType ) {
+					var transformType = transformText.substr( 0, openParPos );
 
-					case "translate":
+					var array = parseFloats( transformText.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
 
-						if ( array.length >= 1 ) {
+					switch ( transformType ) {
 
-							transform = new THREE.Matrix3();
+						case "translate":
 
-							var tx = array[ 0 ];
-							var ty = tx;
+							if ( array.length >= 1 ) {
 
-							if ( array.length >= 2 ) {
+								newTransform = new THREE.Matrix3();
 
-								ty = array[ 1 ];
+								var tx = array[ 0 ];
+								var ty = tx;
+
+								if ( array.length >= 2 ) {
+
+									ty = array[ 1 ];
+
+								}
+
+								newTransform.translate( tx, ty );
 
 							}
 
-							transform.translate( tx, ty );
+							break;
 
-						}
+						case "rotate":
 
-						break;
+							if ( array.length >= 1 ) {
 
-					case "rotate":
+								var angle = 0;
+								var cx = 0;
+								var cy = 0;
 
-						if ( array.length >= 1 ) {
+								newTransform = new THREE.Matrix3();
 
-							var angle = 0;
-							var cx = 0;
-							var cy = 0;
+								// Angle
+								angle = - array[ 0 ] * Math.PI / 180;
 
-							transform = new THREE.Matrix3();
+								if ( array.length >= 3 ) {
 
-							// Angle
-							angle = - array[ 0 ] * Math.PI / 180;
+									// Center x, y
+									cx = array[ 1 ];
+									cy = array[ 2 ];
 
-							if ( array.length >= 3 ) {
+								}
 
-								// Center x, y
-								cx = array[ 1 ];
-								cy = array[ 2 ];
+								// Rotate around center (cx, cy)
+								tempTransform1.identity().translate( -cx, -cy );
+								tempTransform2.identity().rotate( angle );
+								tempTransform3.multiplyMatrices( tempTransform2, tempTransform1 );
+								tempTransform1.identity().translate( cx, cy );
+								newTransform.multiplyMatrices( tempTransform1, tempTransform3 );
 
 							}
 
-							// Rotate around center (cx, cy)
-							tempTransform1.identity().translate( -cx, -cy );
-							tempTransform2.identity().rotate( angle );
-							tempTransform3.multiplyMatrices( tempTransform2, tempTransform1 );
-							tempTransform1.identity().translate( cx, cy );
-							transform.multiplyMatrices( tempTransform1, tempTransform3 );
+							break;
 
-						}
+						case "scale":
 
-						break;
+							if ( array.length >= 1 ) {
 
-					case "scale":
+								newTransform = new THREE.Matrix3();
 
-						if ( array.length >= 1 ) {
+								var scaleX = array[ 0 ];
+								var scaleY = scaleX;
 
-							transform = new THREE.Matrix3();
+								if ( array.length >= 2 ) {
+									scaleY = array[ 1 ];
+								}
 
-							var scaleX = array[ 0 ];
-							var scaleY = scaleX;
+								newTransform.scale( scaleX, scaleY );
 
-							if ( array.length >= 2 ) {
-								scaleY = array[ 1 ];
 							}
 
-							transform.scale( scaleX, scaleY );
+							break;
 
-						}
+						case "skewX":
 
-						break;
+							if ( array.length === 1 ) {
 
-					case "skewX":
+								newTransform = new THREE.Matrix3();
 
-						if ( array.length === 1 ) {
+								newTransform.set(
+									1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
+									0, 1, 0,
+									0, 0, 1
+								);
 
-							transform = new THREE.Matrix3();
+							}
 
-							transform.set(
-								1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
-								0, 1, 0,
-								0, 0, 1
-							);
+							break;
 
-						}
+						case "skewY":
 
-						break;
+							if ( array.length === 1 ) {
 
-					case "skewY":
+								newTransform = new THREE.Matrix3();
 
-						if ( array.length === 1 ) {
+								newTransform.set(
+									1, 0, 0,
+									Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
+									0, 0, 1
+								);
 
-							transform = new THREE.Matrix3();
+							}
 
-							transform.set(
-								1, 0, 0,
-								Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
-								0, 0, 1
-							);
+							break;
 
-						}
+						case "matrix":
 
-						break;
+							if ( array.length === 6 ) {
 
-					case "matrix":
+								newTransform = new THREE.Matrix3();
 
-						if ( array.length === 6 ) {
+								newTransform.set(
+									array[ 0 ], array[ 2 ], array[ 4 ],
+									array[ 1 ], array[ 3 ], array[ 5 ],
+									0, 0, 1
+								);
 
-							transform = new THREE.Matrix3();
+							}
 
-							transform.set(
-								array[ 0 ], array[ 2 ], array[ 4 ],
-								array[ 1 ], array[ 3 ], array[ 5 ],
-								0, 0, 1
-							);
+							break;
+					}
 
-						}
+				}
+
+				if ( newTransform ) {
+
+					if ( transform ) {
+					
+						newTransform.multiply( transform );
+					
+					}
+
+					transform = newTransform;
 
-						break;
 				}
 
 			}