Merge pull request #15092 from yomboprime/transforms

SVG Loader: Accept multiple transforms in a single node

Author: mrdoob

examples/js/loaders/SVGLoader.js

@@ -756,140 +756,139 @@ THREE.SVGLoader.prototype = {
 
 		function parseTransformNode( node ) {
 
-			var transformAttr = node.getAttribute( 'transform' );
-			var transform = null;
-			var openParPos = transformAttr.indexOf( "(" );
-			var closeParPos = transformAttr.indexOf( ")" );
+			var transform = new THREE.Matrix3();
+			var currentTransform = tempTransform0;
+			var transformsTexts = node.getAttribute( 'transform' ).split( ' ' );
+			
+			for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex-- ) {
 
-			if ( openParPos > 0 && openParPos < closeParPos ) {
+				var transformText = transformsTexts[ tIndex ];
+				var openParPos = transformText.indexOf( "(" );
+				var closeParPos = transformText.indexOf( ")" );
 
-				var transformType = transformAttr.substr( 0, openParPos );
+				if ( openParPos > 0 && openParPos < closeParPos ) {
 
-				var array = parseFloats( transformAttr.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
+					var transformType = transformText.substr( 0, openParPos );
 
-				switch ( transformType ) {
+					var array = parseFloats( transformText.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
+					
+					currentTransform.identity();
 
-					case "translate":
+					switch ( transformType ) {
 
-						if ( array.length >= 1 ) {
+						case "translate":
 
-							transform = new THREE.Matrix3();
+							if ( array.length >= 1 ) {
 
-							var tx = array[ 0 ];
-							var ty = tx;
+								var tx = array[ 0 ];
+								var ty = tx;
 
-							if ( array.length >= 2 ) {
+								if ( array.length >= 2 ) {
 
-								ty = array[ 1 ];
+									ty = array[ 1 ];
 
-							}
+								}
 
-							transform.translate( tx, ty );
+								currentTransform.translate( tx, ty );
 
-						}
+							}
 
-						break;
+							break;
 
-					case "rotate":
+						case "rotate":
 
-						if ( array.length >= 1 ) {
+							if ( array.length >= 1 ) {
 
-							var angle = 0;
-							var cx = 0;
-							var cy = 0;
+								var angle = 0;
+								var cx = 0;
+								var cy = 0;
 
-							transform = new THREE.Matrix3();
+								// Angle
+								angle = - array[ 0 ] * Math.PI / 180;
 
-							// Angle
-							angle = - array[ 0 ] * Math.PI / 180;
+								if ( array.length >= 3 ) {
 
-							if ( array.length >= 3 ) {
+									// Center x, y
+									cx = array[ 1 ];
+									cy = array[ 2 ];
 
-								// 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 );
+								currentTransform.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;
 
-						break;
+						case "scale":
 
-					case "scale":
+							if ( array.length >= 1 ) {
 
-						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;
+								currentTransform.scale( scaleX, scaleY );
 
-							if ( array.length >= 2 ) {
-								scaleY = array[ 1 ];
 							}
 
-							transform.scale( scaleX, scaleY );
-
-						}
-
-						break;
-
-					case "skewX":
-
-						if ( array.length === 1 ) {
+							break;
 
-							transform = new THREE.Matrix3();
+						case "skewX":
 
-							transform.set(
-								1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
-								0, 1, 0,
-								0, 0, 1
-							);
+							if ( array.length === 1 ) {
 
-						}
+								currentTransform.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":
 
-							transform = new THREE.Matrix3();
+							if ( array.length === 1 ) {
 
-							transform.set(
-								1, 0, 0,
-								Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
-								0, 0, 1
-							);
+								currentTransform.set(
+									1, 0, 0,
+									Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
+									0, 0, 1
+								);
 
-						}
+							}
 
-						break;
+							break;
 
-					case "matrix":
+						case "matrix":
 
-						if ( array.length === 6 ) {
+							if ( array.length === 6 ) {
 
-							transform = new THREE.Matrix3();
+								currentTransform.set(
+									array[ 0 ], array[ 2 ], array[ 4 ],
+									array[ 1 ], array[ 3 ], array[ 5 ],
+									0, 0, 1
+								);
 
-							transform.set(
-								array[ 0 ], array[ 2 ], array[ 4 ],
-								array[ 1 ], array[ 3 ], array[ 5 ],
-								0, 0, 1
-							);
+							}
 
-						}
+							break;
+					}
 
-						break;
 				}
 
+				transform.premultiply( currentTransform );
+
 			}
 
 			return transform;
@@ -984,6 +983,7 @@ THREE.SVGLoader.prototype = {
 
 		var transformStack = [];
 
+		var tempTransform0 = new THREE.Matrix3();
 		var tempTransform1 = new THREE.Matrix3();
 		var tempTransform2 = new THREE.Matrix3();
 		var tempTransform3 = new THREE.Matrix3();