Mailing-List: contact commits-help@flex.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@flex.apache.org
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
From: bigosmallm@apache.org
To: commits@flex.apache.org
Date: Mon, 01 Apr 2013 19:34:15 -0000
Message-Id: <ca277a7d08ba414295f67a627732dd7e@git.apache.org>
In-Reply-To: <a1113232f3e848c49455162544cb8684@git.apache.org>
References: <a1113232f3e848c49455162544cb8684@git.apache.org>
Subject: [4/4] git commit: Add button test directory transform.xslt updated to
 add more edge cases transform.xslt now handles default alpha values

Add button test directory
transform.xslt updated to add more edge cases
transform.xslt now handles default alpha values


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/5253db01
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/5253db01
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/5253db01

Branch: refs/heads/develop
Commit: 5253db01b6fe17f9554e88e09f54b16f078f5b26
Parents: 7bad965
Author: Om <bigosmallm@gmail.com>
Authored: Mon Apr 1 12:33:47 2013 -0700
Committer: Om <bigosmallm@gmail.com>
Committed: Mon Apr 1 12:33:47 2013 -0700

----------------------------------------------------------------------
 fxg2svg/SparkButtonSkin.xml               |  230 -----------------------
 fxg2svg/TODO.txt                          |    5 +
 fxg2svg/rect.xml                          |   65 -------
 fxg2svg/tests/button/ButtonSkin.xml       |  230 +++++++++++++++++++++++
 fxg2svg/tests/button/button_skin_down.svg |   71 +++++++
 fxg2svg/tests/button/button_skin_over.svg |   59 ++++++
 fxg2svg/tests/button/button_skin_up.svg   |   59 ++++++
 fxg2svg/tests/button/button_test.html     |   28 +++
 fxg2svg/tests/button/flexVhtml5.html      |  118 ++++++++++++
 fxg2svg/transform.xslt                    |  212 ----------------------
 fxg2svg/transform/transform - down.xslt   |  232 ++++++++++++++++++++++++
 fxg2svg/transform/transform - over.xslt   |  232 ++++++++++++++++++++++++
 fxg2svg/transform/transform.xslt          |  215 ++++++++++++++++++++++
 13 files changed, 1249 insertions(+), 507 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/SparkButtonSkin.xml
----------------------------------------------------------------------
diff --git a/fxg2svg/SparkButtonSkin.xml b/fxg2svg/SparkButtonSkin.xml
deleted file mode 100644
index 26cce5b..0000000
--- a/fxg2svg/SparkButtonSkin.xml
+++ /dev/null
@@ -1,230 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-
-
-<!--- The default skin class for the Spark Button component.  
-
-       @see spark.components.Button
-        
-      @langversion 3.0
-      @playerversion Flash 10
-      @playerversion AIR 1.5
-      @productversion Flex 4
--->
-<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
-             xmlns:s="library://ns.adobe.com/flex/spark" 
-             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
-             minWidth="21" minHeight="21" 
-             alpha.disabled="0.5">
-     
-    <fx:Metadata>
-        <![CDATA[ 
-        /** 
-         * @copy spark.skins.spark.ApplicationSkin#hostComponent
-         */
-        [HostComponent("spark.components.Button")]
-        ]]>
-    </fx:Metadata>
-    
-    <fx:Script fb:purpose="styling">
-        <![CDATA[         
-            import spark.components.Group;
-            /* Define the skin elements that should not be colorized. 
-            For button, the graphics are colorized but the label is not. */
-            static private const exclusions:Array = ["labelDisplay"];
-            
-            /** 
-             * @private
-             */     
-            override public function get colorizeExclusions():Array {return exclusions;}
-            
-            /**
-             * @private
-             */
-            override protected function initializationComplete():void
-            {
-                useChromeColor = true;
-                super.initializationComplete();
-            }  
-            
-            /**
-             *  @private
-             */
-            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
-            {
-                var cr:Number = getStyle("cornerRadius");
-                
-                if (cornerRadius != cr)
-                {
-                    cornerRadius = cr;
-                    shadow.radiusX = cornerRadius;
-                    fill.radiusX = cornerRadius;
-                    lowlight.radiusX = cornerRadius;
-                    highlight.radiusX = cornerRadius;
-                    border.radiusX = cornerRadius;
-                }
-                
-                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
-                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
-                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
-                
-                super.updateDisplayList(unscaledWidth, unscaledHeight);
-            }
-            
-            private var cornerRadius:Number = 2;
-                                 
-        ]]>        
-    </fx:Script>
-        
-    <!-- states -->
-    <s:states>
-        <s:State name="up" />
-        <s:State name="over" />
-        <s:State name="down" />
-        <s:State name="disabled" />
-    </s:states>
-    
-    <!-- layer 1: shadow -->
-    <!--- @private -->
-    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
-        <s:fill>
-            <s:LinearGradient rotation="90">
-                <s:GradientEntry color="0x000000" 
-                                 color.down="0xFFFFFF"
-                                 alpha="0.01"
-                                 alpha.down="0" />
-                <s:GradientEntry color="0x000000" 
-                                 color.down="0xFFFFFF" 
-                                 alpha="0.07"
-                                 alpha.down="0.5" />
-            </s:LinearGradient>
-        </s:fill>
-    </s:Rect>
-    
-    <!-- layer 2: fill -->
-    <!--- @private -->
-    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
-        <s:fill>
-            <s:LinearGradient rotation="90">
-                <s:GradientEntry color="0xFFFFFF" 
-                                 color.over="0xBBBDBD" 
-                                 color.down="0xAAAAAA" 
-                                 alpha="0.85" />
-                <s:GradientEntry color="0xD8D8D8" 
-                                 color.over="0x9FA0A1" 
-                                 color.down="0x929496" 
-                                 alpha="0.85" />
-            </s:LinearGradient>
-        </s:fill>
-    </s:Rect>
-
-    <!-- layer 3: fill lowlight -->
-    <!--- @private -->
-    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
-        <s:fill>
-            <s:LinearGradient rotation="270">
-                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
-                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
-                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
-            </s:LinearGradient>
-        </s:fill>
-    </s:Rect>
-    
-    <!-- layer 4: fill highlight -->
-    <!--- @private -->
-    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
-        <s:fill>
-            <s:LinearGradient rotation="90">
-                <s:GradientEntry color="0xFFFFFF"
-                                 ratio="0.0"
-                                 alpha="0.33" 
-                                 alpha.over="0.22" 
-                                 alpha.down="0.12"/>
-                <s:GradientEntry color="0xFFFFFF"
-                                 ratio="0.48"
-                                 alpha="0.33"
-                                 alpha.over="0.22"
-                                 alpha.down="0.12" />
-                <s:GradientEntry color="0xFFFFFF"
-                                 ratio="0.48001"
-                                 alpha="0" />
-            </s:LinearGradient>
-        </s:fill>
-    </s:Rect>
-    
-    <!-- layer 5: highlight stroke (all states except down) -->
-    <!--- @private -->
-    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
-        <s:stroke>
-            <s:LinearGradientStroke rotation="90" weight="1">
-                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
-                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
-            </s:LinearGradientStroke>
-        </s:stroke>
-    </s:Rect>
-    
-    <!-- layer 6: highlight stroke (down state only) -->
-    <!--- @private -->
-    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
-        <s:stroke>
-            <s:LinearGradientStroke rotation="90" weight="1">
-                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
-                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
-                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
-                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
-                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
-            </s:LinearGradientStroke>
-        </s:stroke>
-    </s:Rect>
-    <!--- @private -->
-    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
-        <s:stroke>
-            <s:LinearGradientStroke rotation="90" weight="1">
-                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
-                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
-            </s:LinearGradientStroke>
-        </s:stroke>
-    </s:Rect>
-
-    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
-    <!--- @private -->
-    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
-        <s:stroke>
-            <s:LinearGradientStroke rotation="90" weight="1">
-                <s:GradientEntry color="0x000000" 
-                                 alpha="0.5625"
-                                 alpha.down="0.6375" />
-                <s:GradientEntry color="0x000000" 
-                                 alpha="0.75" 
-                                 alpha.down="0.85" />
-            </s:LinearGradientStroke>
-        </s:stroke>
-    </s:Rect>
-    
-    <!-- layer 8: text -->
-    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
-    <s:Label id="labelDisplay"
-             textAlign="center"
-             maxDisplayedLines="1"
-             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
-             left="10" right="10" top="2" bottom="2">
-    </s:Label>
-    
-</s:SparkButtonSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/TODO.txt
----------------------------------------------------------------------
diff --git a/fxg2svg/TODO.txt b/fxg2svg/TODO.txt
new file mode 100644
index 0000000..a7653c0
--- /dev/null
+++ b/fxg2svg/TODO.txt
@@ -0,0 +1,5 @@
+1.  Gradient: In FXG, if there are only two stops, the first ratio (stop-offset) defaults to 0 and second ratio (stop-offset) defaults to 1
+2.  GradientTransform: rotation(270) must be set in the format: x1="0%" y1="100%" x2="0%" y2="0%" (Right now doing it by hand)
+3.  Text does not seem to be vertially centered in SVG.  (done)
+4.  Handle multiple states (via Ant, I guess)
+5.  Make sure empty namespace is not created for linearGradient (done)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/rect.xml
----------------------------------------------------------------------
diff --git a/fxg2svg/rect.xml b/fxg2svg/rect.xml
deleted file mode 100644
index d5b0301..0000000
--- a/fxg2svg/rect.xml
+++ /dev/null
@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
-	<s:Rect height="75" width="75" x="100" y="215" radiusX="20" radiusY="50">
-		<s:fill>
-			<s:SolidColor color="0x0000FF"/>
-		</s:fill>
-		<s:stroke>
-			<s:SolidColorStroke color="0x666666" weight="1"/>
-		</s:stroke>
-	</s:Rect>
-	<s:Rect id="shadow" x="100" y="100" width="300" height="300" radiusX="2">
-		<s:fill>
-			<s:LinearGradient>
-				<s:GradientEntry color="0x000000" alpha="0.01" ratio="0"/>
-				<s:GradientEntry color="0x000000" alpha="0.07" ratio="1"/>
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-		<s:Rect x="500" y="500" width="300" height="300" radiusX="2">
-		<s:fill>
-			<s:LinearGradient>
-				<s:GradientEntry color="0x0000FF" alpha="0.1" ratio="0"/>
-				<s:GradientEntry color="0x00FF00" alpha="0.9" ratio="1"/>
-			</s:LinearGradient>
-		</s:fill>
-	</s:Rect>
-    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
-        <s:fill>
-            <s:LinearGradient rotation="90">
-                <s:GradientEntry color="0xFFFFFF"
-                                 ratio="0.0"
-                                 alpha="0.33" 
-                                 alpha.over="0.22" 
-                                 alpha.down="0.12"/>
-                <s:GradientEntry color="0xFFFFFF"
-                                 ratio="0.48"
-                                 alpha="0.33"
-                                 alpha.over="0.22"
-                                 alpha.down="0.12" />
-                <s:GradientEntry color="0xFFFFFF"
-                                 ratio="0.48001"
-                                 alpha="0" />
-            </s:LinearGradient>
-        </s:fill>
-    </s:Rect>	
-	
-</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/tests/button/ButtonSkin.xml
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/ButtonSkin.xml b/fxg2svg/tests/button/ButtonSkin.xml
new file mode 100644
index 0000000..26cce5b
--- /dev/null
+++ b/fxg2svg/tests/button/ButtonSkin.xml
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the Spark Button component.  
+
+       @see spark.components.Button
+        
+      @langversion 3.0
+      @playerversion Flash 10
+      @playerversion AIR 1.5
+      @productversion Flex 4
+-->
+<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+             xmlns:s="library://ns.adobe.com/flex/spark" 
+             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+             minWidth="21" minHeight="21" 
+             alpha.disabled="0.5">
+     
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.Button")]
+        ]]>
+    </fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[         
+            import spark.components.Group;
+            /* Define the skin elements that should not be colorized. 
+            For button, the graphics are colorized but the label is not. */
+            static private const exclusions:Array = ["labelDisplay"];
+            
+            /** 
+             * @private
+             */     
+            override public function get colorizeExclusions():Array {return exclusions;}
+            
+            /**
+             * @private
+             */
+            override protected function initializationComplete():void
+            {
+                useChromeColor = true;
+                super.initializationComplete();
+            }  
+            
+            /**
+             *  @private
+             */
+            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+            {
+                var cr:Number = getStyle("cornerRadius");
+                
+                if (cornerRadius != cr)
+                {
+                    cornerRadius = cr;
+                    shadow.radiusX = cornerRadius;
+                    fill.radiusX = cornerRadius;
+                    lowlight.radiusX = cornerRadius;
+                    highlight.radiusX = cornerRadius;
+                    border.radiusX = cornerRadius;
+                }
+                
+                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
+                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
+                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
+                
+                super.updateDisplayList(unscaledWidth, unscaledHeight);
+            }
+            
+            private var cornerRadius:Number = 2;
+                                 
+        ]]>        
+    </fx:Script>
+        
+    <!-- states -->
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" />
+        <s:State name="down" />
+        <s:State name="disabled" />
+    </s:states>
+    
+    <!-- layer 1: shadow -->
+    <!--- @private -->
+    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0x000000" 
+                                 color.down="0xFFFFFF"
+                                 alpha="0.01"
+                                 alpha.down="0" />
+                <s:GradientEntry color="0x000000" 
+                                 color.down="0xFFFFFF" 
+                                 alpha="0.07"
+                                 alpha.down="0.5" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 2: fill -->
+    <!--- @private -->
+    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xFFFFFF" 
+                                 color.over="0xBBBDBD" 
+                                 color.down="0xAAAAAA" 
+                                 alpha="0.85" />
+                <s:GradientEntry color="0xD8D8D8" 
+                                 color.over="0x9FA0A1" 
+                                 color.down="0x929496" 
+                                 alpha="0.85" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+
+    <!-- layer 3: fill lowlight -->
+    <!--- @private -->
+    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="270">
+                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
+                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
+                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 4: fill highlight -->
+    <!--- @private -->
+    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.0"
+                                 alpha="0.33" 
+                                 alpha.over="0.22" 
+                                 alpha.down="0.12"/>
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.48"
+                                 alpha="0.33"
+                                 alpha.over="0.22"
+                                 alpha.down="0.12" />
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.48001"
+                                 alpha="0" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 5: highlight stroke (all states except down) -->
+    <!--- @private -->
+    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 6: highlight stroke (down state only) -->
+    <!--- @private -->
+    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
+                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
+                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
+                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
+                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    <!--- @private -->
+    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
+                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+
+    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+    <!--- @private -->
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" 
+                                 alpha="0.5625"
+                                 alpha.down="0.6375" />
+                <s:GradientEntry color="0x000000" 
+                                 alpha="0.75" 
+                                 alpha.down="0.85" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 8: text -->
+    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
+    <s:Label id="labelDisplay"
+             textAlign="center"
+             maxDisplayedLines="1"
+             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
+             left="10" right="10" top="2" bottom="2">
+    </s:Label>
+    
+</s:SparkButtonSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/tests/button/button_skin_down.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_skin_down.svg b/fxg2svg/tests/button/button_skin_down.svg
new file mode 100644
index 0000000..2ceea0a
--- /dev/null
+++ b/fxg2svg/tests/button/button_skin_down.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:xs="http://www.w3.org/2001/XMLSchema" id="button_down" width="100%" height="100%" version="1.1">
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="-1" right="-1" top="-1" bottom="-1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x32" gradientTransform="rotate(90)">
+                <stop offset="0" stop-color="#FFFFFF" stop-opacity="0" />
+                <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.5" />
+            </linearGradient>
+        </defs>
+        <rect id="shadow" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x32)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x54" gradientTransform="rotate(90)">
+                <stop offset="0" stop-color="#AAAAAA" stop-opacity="0.85" />
+                <stop offset="1" stop-color="#929496" stop-opacity="0.85" />
+            </linearGradient>
+        </defs>
+        <rect id="fill" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x54)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x76" x1="0%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0.0" stop-color="#000000" stop-opacity="0.0627" />
+                <stop offset="0.48" stop-color="#000000" stop-opacity="0.0099" />
+                <stop offset="0.48001" stop-color="#000000" stop-opacity="0" />
+            </linearGradient>
+        </defs>
+        <rect id="lowlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x76)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x100" gradientTransform="rotate(90)">
+                <stop offset="0.0" stop-color="#FFFFFF" stop-opacity="0.12" />
+                <stop offset="0.48" stop-color="#FFFFFF" stop-opacity="0.12" />
+                <stop offset="0.48001" stop-color="#FFFFFF" stop-opacity="0" />
+            </linearGradient>
+        </defs>
+        <rect id="highlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x100)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x149">
+                <stop offset="0.0" stop-color="#000000" stop-opacity="0.25" />
+                <stop offset="0.001" stop-color="#000000" stop-opacity="0.25" />
+                <stop offset="0.0011" stop-color="#000000" stop-opacity="0.07" />
+                <stop offset="0.965" stop-color="#000000" stop-opacity="0.07" />
+                <stop offset="0.9651" stop-color="#000000" stop-opacity="0.00" />
+            </linearGradient>
+        </defs>
+        <rect id="hldownstroke1" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x149)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="2" right="2" top="2" bottom="2">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x182">
+                <stop offset="0.0" stop-color="#000000" stop-opacity="0.09" />
+                <stop offset="0.0001" stop-color="#000000" stop-opacity="0.00" />
+            </linearGradient>
+        </defs>
+        <rect id="hldownstroke2" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x182)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x205">
+                <stop offset="0" stop-color="#000000" stop-opacity="0.6375" />
+                <stop offset="1" stop-color="#000000" stop-opacity="0.85" />
+            </linearGradient>
+        </defs>
+        <rect id="border" width="100%" height="100%" rx="2" ry="2" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x205)" />
+    </svg>
+</svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/tests/button/button_skin_over.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_skin_over.svg b/fxg2svg/tests/button/button_skin_over.svg
new file mode 100644
index 0000000..81a5ebe
--- /dev/null
+++ b/fxg2svg/tests/button/button_skin_over.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:xs="http://www.w3.org/2001/XMLSchema" id="button_over" width="100%" height="100%" version="1.1">
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="-1" right="-1" top="-1" bottom="-1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x32" gradientTransform="rotate(90)">
+                <stop offset="0" stop-color="#000000" stop-opacity="0.01" />
+                <stop offset="1" stop-color="#000000" stop-opacity="0.07" />
+            </linearGradient>
+        </defs>
+        <rect id="shadow" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x32)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x54" gradientTransform="rotate(90)">
+                <stop offset="0" stop-color="#BBBDBD" stop-opacity="0.85" />
+                <stop offset="1" stop-color="#9FA0A1" stop-opacity="0.85" />
+            </linearGradient>
+        </defs>
+        <rect id="fill" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x54)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x76" x1="0%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0.0" stop-color="#000000" stop-opacity="0.0627" />
+                <stop offset="0.48" stop-color="#000000" stop-opacity="0.0099" />
+                <stop offset="0.48001" stop-color="#000000" stop-opacity="0" />
+            </linearGradient>
+        </defs>
+        <rect id="lowlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x76)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x100" gradientTransform="rotate(90)">
+                <stop offset="0.0" stop-color="#FFFFFF" stop-opacity="0.22" />
+                <stop offset="0.48" stop-color="#FFFFFF" stop-opacity="0.22" />
+                <stop offset="0.48001" stop-color="#FFFFFF" stop-opacity="0" />
+            </linearGradient>
+        </defs>
+        <rect id="highlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x100)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x129">
+                <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.22" />
+                <stop offset="1" stop-color="#D8D8D8" stop-opacity="0.22" />
+            </linearGradient>
+        </defs>
+        <rect id="highlightStroke" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x129)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x205">
+                <stop offset="0" stop-color="#000000" stop-opacity="0.5625" />
+                <stop offset="1" stop-color="#000000" stop-opacity="0.75" />
+            </linearGradient>
+        </defs>
+        <rect id="border" width="100%" height="100%" rx="2" ry="2" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x205)" />
+    </svg>
+</svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/tests/button/button_skin_up.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_skin_up.svg b/fxg2svg/tests/button/button_skin_up.svg
new file mode 100644
index 0000000..2889539
--- /dev/null
+++ b/fxg2svg/tests/button/button_skin_up.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:xs="http://www.w3.org/2001/XMLSchema" id="button" width="100%" height="100%" version="1.1">
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="-1" right="-1" top="-1" bottom="-1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x32" gradientTransform="rotate(90)">
+                <stop offset="0" stop-color="#000000" stop-opacity="0.01" />
+                <stop offset="1" stop-color="#000000" stop-opacity="0.07" />
+            </linearGradient>
+        </defs>
+        <rect id="shadow" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x32)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x54" gradientTransform="rotate(90)">
+                <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85" />
+                <stop offset="1" stop-color="#D8D8D8" stop-opacity="0.85" />
+            </linearGradient>
+        </defs>
+        <rect id="fill" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x54)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x76" x1="0%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0.0" stop-color="#000000" stop-opacity="0.0627" />
+                <stop offset="0.48" stop-color="#000000" stop-opacity="0.0099" />
+                <stop offset="0.48001" stop-color="#000000" stop-opacity="0" />
+            </linearGradient>
+        </defs>
+        <rect id="lowlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x76)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientx63x100" gradientTransform="rotate(90)">
+                <stop offset="0.0" stop-color="#FFFFFF" stop-opacity="0.33" />
+                <stop offset="0.48" stop-color="#FFFFFF" stop-opacity="0.33" />
+                <stop offset="0.48001" stop-color="#FFFFFF" stop-opacity="0" />
+            </linearGradient>
+        </defs>
+        <rect id="highlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#idLinearGradientx63x100)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x129">
+                <stop offset="0" stop-color="#FFFFFF" />
+                <stop offset="1" stop-color="#D8D8D8" />
+            </linearGradient>
+        </defs>
+        <rect id="highlightStroke" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x129)" />
+    </svg>
+    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+        <defs>
+            <linearGradient id="idLinearGradientStrokex63x205">
+                <stop offset="0" stop-color="#000000" stop-opacity="0.5625" />
+                <stop offset="1" stop-color="#000000" stop-opacity="0.75" />
+            </linearGradient>
+        </defs>
+        <rect id="border" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x205)" />
+    </svg>
+</svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/tests/button/button_test.html
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_test.html b/fxg2svg/tests/button/button_test.html
new file mode 100644
index 0000000..3083cfd
--- /dev/null
+++ b/fxg2svg/tests/button/button_test.html
@@ -0,0 +1,28 @@
+<html>
+	<head>
+		<style> 
+			.button {
+				position: absolute;
+				background: url(button_skin_up.svg) 0 0 no-repeat;
+				border: 0px;
+				width: 100px;
+				height: 30px;
+				top:100px;
+				left:100px;
+				font-size:12px;
+			}
+
+			.button:hover {
+				background: url(button_skin_over.svg) 0 0 no-repeat;
+			}
+			
+			.button:active {
+				background: url(button_skin_down.svg) 0 0 no-repeat;
+			}
+			
+		</style>
+	</head>
+	<body>
+		<button type="button" class="button">Start Timer</button>
+	</body>
+</html>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/tests/button/flexVhtml5.html
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/flexVhtml5.html b/fxg2svg/tests/button/flexVhtml5.html
new file mode 100644
index 0000000..8f5149a
--- /dev/null
+++ b/fxg2svg/tests/button/flexVhtml5.html
@@ -0,0 +1,118 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!-- saved from url=(0014)about:internet -->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
+    <!-- 
+    Smart developers always View Source. 
+    
+    This application was built using Apache Flex, an open source framework
+    for building rich Internet applications that get delivered via the
+    Flash Player or to desktops via Adobe AIR. 
+    
+    Learn more about Flex at http://flex.org 
+    // -->
+    <head>
+ 		<style> 
+			.button {
+				position: absolute;
+				background: url(button_skin_up.svg) 0 0 no-repeat;
+				border: 0px;
+				font-size:12px;
+			}
+
+			.button:hover {
+				background: url(button_skin_over.svg) 0 0 no-repeat;
+			}
+			
+			.button:active {
+				background: url(button_skin_down.svg) 0 0 no-repeat;
+			}
+			
+			#html5{
+				position:absolute;
+				left:600px;
+				top:10px;
+			}
+
+			.ok{
+				width: 50px;
+				height: 30px;
+				left:0px;
+				top:50px;
+			}
+			
+			.timer{
+				width: 100px;
+				height: 30px;
+			}
+			
+			.start{
+				left:0px;
+				top:100px;	
+			}
+			
+			.stop{
+				left:0px;
+				top:150px;	
+			}
+			
+			.big{
+				width: 100px;
+				height: 100px;
+				left:0px;
+				top:200px;
+			}
+			
+		</style>
+    </head>
+    <body>
+		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="500" id="SeeFXG" top="0" left="0">
+			<param name="movie" value="SeeFXG.swf" />
+			<param name="quality" value="high" />
+			<param name="bgcolor" value="#ffffff" />
+			<param name="allowScriptAccess" value="sameDomain" />
+			<param name="allowFullScreen" value="true" />
+			<!--[if !IE]>-->
+			<object type="application/x-shockwave-flash" data="SeeFXG.swf" width="500" height="500" top="0" left="0">
+				<param name="quality" value="high" />
+				<param name="bgcolor" value="#ffffff" />
+				<param name="allowScriptAccess" value="sameDomain" />
+				<param name="allowFullScreen" value="true" />
+			<!--<![endif]-->
+			<!--[if gte IE 6]>-->
+				<p> 
+					Either scripts and active content are not permitted to run or Adobe Flash Player version
+					0.0.0 or greater is not installed.
+				</p>
+			<!--<![endif]-->
+				<a href="http://www.adobe.com/go/getflashplayer">
+					<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
+				</a>
+			<!--[if !IE]>-->
+			</object>
+			<!--<![endif]-->
+		</object>
+		<div id="html5">
+			<button type="button" class="button ok">OK</button>	
+			<button type="button" class="button timer start">Start Timer</button>
+			<button type="button" class="button timer stop">Stop Timer</button>
+			<button type="button" class="button big">Big Button</button>
+		</div>
+		
+    </body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/transform.xslt
----------------------------------------------------------------------
diff --git a/fxg2svg/transform.xslt b/fxg2svg/transform.xslt
deleted file mode 100644
index 8dd36cc..0000000
--- a/fxg2svg/transform.xslt
+++ /dev/null
@@ -1,212 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-
-  Licensed to the Apache Software Foundation (ASF) under one or more
-  contributor license agreements.  See the NOTICE file distributed with
-  this work for additional information regarding copyright ownership.
-  The ASF licenses this file to You under the Apache License, Version 2.0
-  (the "License"); you may not use this file except in compliance with
-  the License.  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
--->
-<xsl:stylesheet version="2.0"
-	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema"
-	xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
-
-	<xsl:strip-space elements="s:*" />
-	<xsl:output method="xml" encoding="UTF-8" indent="yes" />
-
-	<xsl:template match="/">
-		<svg id="button">
-			<xsl:apply-templates mode="rect" />
-			<xsl:apply-templates mode="text" />
-		</svg>
-	</xsl:template>
-	
-	<xsl:template match="fx:Script" mode="#all" />
-	<xsl:template match="fx:Metadata" mode="#all" />
-	
-	<xsl:template match="s:states" mode="rect">
-			<xsl:for-each select="s:State">
-					<xsl:apply-templates mode="rect" />
-			</xsl:for-each>
-	</xsl:template>
-
-	<xsl:template match="s:Rect|Rect" mode="rect">
-		<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
-			version="1.1" >
-			<xsl:if test="@left">
-				<xsl:attribute name="left">
-					<xsl:value-of select="@left" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@right">
-				<xsl:attribute name="right">
-					<xsl:value-of select="@right" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@top">
-				<xsl:attribute name="top">
-					<xsl:value-of select="@top" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@bottom">
-				<xsl:attribute name="bottom">
-					<xsl:value-of select="@bottom" />
-				</xsl:attribute>
-			</xsl:if>
-			<defs>
-				<xsl:apply-templates mode="defs" />
-			</defs>
-		<rect >
-			<xsl:if test="@id">
-				<xsl:attribute name="id">
-					<xsl:value-of select="@id" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@x">
-				<xsl:attribute name="x">
-					<xsl:value-of select="@x" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@y">
-				<xsl:attribute name="y">
-					<xsl:value-of select="@y" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@width">
-				<xsl:attribute name="width">
-					<xsl:value-of select="@width" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@height">
-				<xsl:attribute name="height">
-					<xsl:value-of select="@height" />
-				</xsl:attribute>
-			</xsl:if>
-
-			<xsl:if test="@radiusX">
-				<xsl:attribute name="rx">
-					<xsl:value-of select="@radiusX" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@radiusY">
-				<xsl:attribute name="ry">
-					<xsl:value-of select="@radiusY" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@radiusX and not(@radiusY)">
-				<xsl:attribute name="rx">
-					<xsl:value-of select="@radiusX" />
-				</xsl:attribute>
-				<xsl:attribute name="ry">
-					<xsl:value-of select="@radiusX" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="@radiusY and not(@radiusX)">
-				<xsl:attribute name="rx">
-					<xsl:value-of select="@radiusY" />
-				</xsl:attribute>
-				<xsl:attribute name="ry">
-					<xsl:value-of select="@radiusY" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="not(@width) ">
-					<xsl:attribute name="width">100%</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="not(@height) ">
-					<xsl:attribute name="height">100%</xsl:attribute>
-			</xsl:if>
-			<xsl:if test="not(s:fill) ">
-					<xsl:attribute name="fill">none</xsl:attribute>
-			</xsl:if>
-
-			<xsl:apply-templates mode="rect" />
-
-		</rect>
-</svg>
-	</xsl:template>
-
-	<xsl:template match="s:fill" mode="rect">
-		<xsl:apply-templates mode="rect" />
-	</xsl:template>
-	
-	<xsl:template match="s:stroke" mode="rect">
-		<xsl:apply-templates mode="rect" />
-	</xsl:template>
-
-	<xsl:template match="s:SolidColor" mode="rect">
-		<xsl:attribute name="style">fill:#<xsl:value-of
-			select="substring-after(@color, '0x')" />
-		</xsl:attribute>
-	</xsl:template>
-	
-	<xsl:template match="s:LinearGradient" mode="rect">
-		<xsl:attribute name="style">fill:url(#<xsl:value-of
-			select="generate-id(.)" />)</xsl:attribute>
-	</xsl:template>
-	
-	<xsl:template match="s:LinearGradientStroke" mode="rect">
-		<xsl:attribute name="style">stroke-width:<xsl:value-of select="@weight+1"></xsl:value-of>;stroke:url(#<xsl:value-of
-			select="generate-id(.)" />)</xsl:attribute>
-	</xsl:template>
-	
-	<xsl:template match="//s:LinearGradient" mode="defs">
-		<linearGradient>
-			<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
-			<xsl:if test="@rotation">
-				<xsl:attribute name="gradientTransform">rotate(<xsl:value-of select="@rotation" />)</xsl:attribute>
-			</xsl:if>			
-			<xsl:apply-templates mode="defs" />
-		</linearGradient>
-	</xsl:template>
-	
-		<xsl:template match="//s:LinearGradientStroke" mode="defs">
-			<linearGradient>
-				<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
-				<xsl:apply-templates mode="defs" />
-			</linearGradient>
-	</xsl:template>
-
-	<xsl:template match="//s:GradientEntry" mode="defs">
-		<stop>
-			<xsl:attribute name="offset">
-				<xsl:value-of select="@ratio"></xsl:value-of>
-			</xsl:attribute>
-			<xsl:attribute name="stop-color">#<xsl:value-of
-				select="substring-after(@color, '0x')" />
-			</xsl:attribute>
-			<xsl:attribute name="stop-opacity">
-				<xsl:value-of select="@alpha" />
-			</xsl:attribute>
-		</stop>
-	</xsl:template>
-	
-<!-- Text -->
-
-	<xsl:template match="s:Label" mode="text" >
-	<svg>
-		<text>
-			<xsl:if test="@id">
-				<xsl:attribute name="id">
-					<xsl:value-of select="@id" />
-				</xsl:attribute>
-			</xsl:if>
-			<xsl:attribute name="text-anchor">middle</xsl:attribute>
-			<xsl:attribute name="pointer-events">none</xsl:attribute>
-			<xsl:attribute name="dy">.3em</xsl:attribute>
-			<xsl:attribute name="x">50%</xsl:attribute>
-			<xsl:attribute name="y">50%</xsl:attribute>Hello</text>
-		</svg>	
-	</xsl:template>	
-	
-
-</xsl:stylesheet>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/transform/transform - down.xslt
----------------------------------------------------------------------
diff --git a/fxg2svg/transform/transform - down.xslt b/fxg2svg/transform/transform - down.xslt
new file mode 100644
index 0000000..6eac56c
--- /dev/null
+++ b/fxg2svg/transform/transform - down.xslt	
@@ -0,0 +1,232 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<xsl:stylesheet version="2.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns="http://www.w3.org/2000/svg">
+
+	<xsl:strip-space elements="s:*" />
+	<xsl:output method="xml" encoding="UTF-8" indent="yes" />
+
+	<xsl:template match="/">
+		<svg id="button_down" width="100%" height="100%" version="1.1" >
+			<xsl:apply-templates mode="rect" />
+			<xsl:apply-templates mode="text" />
+		</svg>
+	</xsl:template>
+	
+	<xsl:template match="fx:Script" mode="#all" />
+	<xsl:template match="fx:Metadata" mode="#all" />
+	
+	<xsl:template match="s:states" mode="rect">
+			<xsl:for-each select="s:State">
+					<xsl:apply-templates mode="rect" />
+			</xsl:for-each>
+	</xsl:template>
+
+	<xsl:template match="s:Rect|Rect" mode="rect">
+		<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
+			version="1.1" >
+			<xsl:if test="@left">
+				<xsl:attribute name="left">
+					<xsl:value-of select="@left" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@right">
+				<xsl:attribute name="right">
+					<xsl:value-of select="@right" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@top">
+				<xsl:attribute name="top">
+					<xsl:value-of select="@top" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@bottom">
+				<xsl:attribute name="bottom">
+					<xsl:value-of select="@bottom" />
+				</xsl:attribute>
+			</xsl:if>
+			<defs>
+				<xsl:apply-templates mode="defs" />
+			</defs>
+		<rect >
+			<xsl:if test="@id">
+				<xsl:attribute name="id">
+					<xsl:value-of select="@id" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@x">
+				<xsl:attribute name="x">
+					<xsl:value-of select="@x" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@y">
+				<xsl:attribute name="y">
+					<xsl:value-of select="@y" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@width">
+				<xsl:attribute name="width">
+					<xsl:value-of select="@width" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@height">
+				<xsl:attribute name="height">
+					<xsl:value-of select="@height" />
+				</xsl:attribute>
+			</xsl:if>
+
+			<xsl:if test="@radiusX">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusY">
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusX and not(@radiusY)">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusY and not(@radiusX)">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(@width) ">
+					<xsl:attribute name="width">100%</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(@height) ">
+					<xsl:attribute name="height">100%</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(s:fill) ">
+					<xsl:attribute name="fill">none</xsl:attribute>
+			</xsl:if>
+
+			<xsl:apply-templates mode="rect" />
+
+		</rect>
+</svg>
+	</xsl:template>
+
+	<xsl:template match="s:fill" mode="rect">
+		<xsl:apply-templates mode="rect" />
+	</xsl:template>
+	
+	<xsl:template match="s:stroke" mode="rect">
+		<xsl:apply-templates mode="rect" />
+	</xsl:template>
+
+	<xsl:template match="s:SolidColor" mode="rect">
+		<xsl:attribute name="style">fill:#<xsl:value-of
+			select="substring-after(@color, '0x')" />
+		</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="s:LinearGradient" mode="rect">
+		<xsl:attribute name="style">fill:url(#<xsl:value-of
+			select="generate-id(.)" />)</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="s:LinearGradientStroke" mode="rect">
+		<xsl:attribute name="style">stroke-width:<xsl:value-of select="@weight+1"></xsl:value-of>;stroke:url(#<xsl:value-of
+			select="generate-id(.)" />)</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="//s:LinearGradient" mode="defs">
+		<linearGradient>
+			<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
+			<xsl:if test="@rotation">
+				<xsl:attribute name="gradientTransform">rotate(<xsl:value-of select="@rotation" />)</xsl:attribute>
+			</xsl:if>			
+			<xsl:apply-templates mode="defs" />
+		</linearGradient>
+	</xsl:template>
+	
+		<xsl:template match="//s:LinearGradientStroke" mode="defs">
+			<linearGradient>
+				<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
+				<xsl:apply-templates mode="defs" />
+			</linearGradient>
+	</xsl:template>
+
+	<xsl:template match="//s:GradientEntry" mode="defs">
+		<stop>
+			<xsl:attribute name="offset">
+				<xsl:value-of select="@ratio"></xsl:value-of>
+			</xsl:attribute>
+			<xsl:choose>
+				<xsl:when test="attribute(color.down)">
+					<xsl:attribute name="stop-color">#<xsl:value-of
+				select="substring-after(@color.down, '0x')" />
+			</xsl:attribute>
+				</xsl:when>
+				<xsl:otherwise>
+					<xsl:attribute name="stop-color">#<xsl:value-of
+				select="substring-after(@color, '0x')" />
+			</xsl:attribute>
+				</xsl:otherwise>
+			</xsl:choose>
+			
+			<xsl:choose>
+				<xsl:when test="attribute(alpha.down)">
+					<xsl:attribute name="stop-opacity">
+						<xsl:value-of select="@alpha.down" />
+					</xsl:attribute>
+				</xsl:when>
+				<xsl:otherwise>
+					<xsl:attribute name="stop-opacity">
+						<xsl:value-of select="@alpha" />
+					</xsl:attribute>
+				</xsl:otherwise>
+			</xsl:choose>
+
+		</stop>
+	</xsl:template>
+	
+<!-- Text
+
+	<xsl:template match="s:Label" mode="text" >
+	<svg>
+		<text>
+			<xsl:if test="@id">
+				<xsl:attribute name="id">
+					<xsl:value-of select="@id" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:attribute name="text-anchor">middle</xsl:attribute>
+			<xsl:attribute name="pointer-events">none</xsl:attribute>
+			<xsl:attribute name="dy">.3em</xsl:attribute>
+			<xsl:attribute name="x">50%</xsl:attribute>
+			<xsl:attribute name="y">50%</xsl:attribute>Hello</text>
+		</svg>	
+	</xsl:template>	
+	
+ -->
+</xsl:stylesheet>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/transform/transform - over.xslt
----------------------------------------------------------------------
diff --git a/fxg2svg/transform/transform - over.xslt b/fxg2svg/transform/transform - over.xslt
new file mode 100644
index 0000000..1d68063
--- /dev/null
+++ b/fxg2svg/transform/transform - over.xslt	
@@ -0,0 +1,232 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<xsl:stylesheet version="2.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns="http://www.w3.org/2000/svg">
+
+	<xsl:strip-space elements="s:*" />
+	<xsl:output method="xml" encoding="UTF-8" indent="yes" />
+
+	<xsl:template match="/">
+		<svg id="button_over" width="100%" height="100%" version="1.1" >
+			<xsl:apply-templates mode="rect" />
+			<xsl:apply-templates mode="text" />
+		</svg>
+	</xsl:template>
+	
+	<xsl:template match="fx:Script" mode="#all" />
+	<xsl:template match="fx:Metadata" mode="#all" />
+	
+	<xsl:template match="s:states" mode="rect">
+			<xsl:for-each select="s:State">
+					<xsl:apply-templates mode="rect" />
+			</xsl:for-each>
+	</xsl:template>
+
+	<xsl:template match="s:Rect|Rect" mode="rect">
+		<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
+			version="1.1" >
+			<xsl:if test="@left">
+				<xsl:attribute name="left">
+					<xsl:value-of select="@left" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@right">
+				<xsl:attribute name="right">
+					<xsl:value-of select="@right" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@top">
+				<xsl:attribute name="top">
+					<xsl:value-of select="@top" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@bottom">
+				<xsl:attribute name="bottom">
+					<xsl:value-of select="@bottom" />
+				</xsl:attribute>
+			</xsl:if>
+			<defs>
+				<xsl:apply-templates mode="defs" />
+			</defs>
+		<rect >
+			<xsl:if test="@id">
+				<xsl:attribute name="id">
+					<xsl:value-of select="@id" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@x">
+				<xsl:attribute name="x">
+					<xsl:value-of select="@x" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@y">
+				<xsl:attribute name="y">
+					<xsl:value-of select="@y" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@width">
+				<xsl:attribute name="width">
+					<xsl:value-of select="@width" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@height">
+				<xsl:attribute name="height">
+					<xsl:value-of select="@height" />
+				</xsl:attribute>
+			</xsl:if>
+
+			<xsl:if test="@radiusX">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusY">
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusX and not(@radiusY)">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusY and not(@radiusX)">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(@width) ">
+					<xsl:attribute name="width">100%</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(@height) ">
+					<xsl:attribute name="height">100%</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(s:fill) ">
+					<xsl:attribute name="fill">none</xsl:attribute>
+			</xsl:if>
+
+			<xsl:apply-templates mode="rect" />
+
+		</rect>
+</svg>
+	</xsl:template>
+
+	<xsl:template match="s:fill" mode="rect">
+		<xsl:apply-templates mode="rect" />
+	</xsl:template>
+	
+	<xsl:template match="s:stroke" mode="rect">
+		<xsl:apply-templates mode="rect" />
+	</xsl:template>
+
+	<xsl:template match="s:SolidColor" mode="rect">
+		<xsl:attribute name="style">fill:#<xsl:value-of
+			select="substring-after(@color, '0x')" />
+		</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="s:LinearGradient" mode="rect">
+		<xsl:attribute name="style">fill:url(#<xsl:value-of
+			select="generate-id(.)" />)</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="s:LinearGradientStroke" mode="rect">
+		<xsl:attribute name="style">stroke-width:<xsl:value-of select="@weight+1"></xsl:value-of>;stroke:url(#<xsl:value-of
+			select="generate-id(.)" />)</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="//s:LinearGradient" mode="defs">
+		<linearGradient>
+			<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
+			<xsl:if test="@rotation">
+				<xsl:attribute name="gradientTransform">rotate(<xsl:value-of select="@rotation" />)</xsl:attribute>
+			</xsl:if>			
+			<xsl:apply-templates mode="defs" />
+		</linearGradient>
+	</xsl:template>
+	
+		<xsl:template match="//s:LinearGradientStroke" mode="defs">
+			<linearGradient>
+				<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
+				<xsl:apply-templates mode="defs" />
+			</linearGradient>
+	</xsl:template>
+
+	<xsl:template match="//s:GradientEntry" mode="defs">
+		<stop>
+			<xsl:attribute name="offset">
+				<xsl:value-of select="@ratio"></xsl:value-of>
+			</xsl:attribute>
+			<xsl:choose>
+				<xsl:when test="attribute(color.over)">
+					<xsl:attribute name="stop-color">#<xsl:value-of
+				select="substring-after(@color.over, '0x')" />
+			</xsl:attribute>
+				</xsl:when>
+				<xsl:otherwise>
+					<xsl:attribute name="stop-color">#<xsl:value-of
+				select="substring-after(@color, '0x')" />
+			</xsl:attribute>
+				</xsl:otherwise>
+			</xsl:choose>
+			
+			<xsl:choose>
+				<xsl:when test="attribute(alpha.over)">
+					<xsl:attribute name="stop-opacity">
+						<xsl:value-of select="@alpha.over" />
+					</xsl:attribute>
+				</xsl:when>
+				<xsl:otherwise>
+					<xsl:attribute name="stop-opacity">
+						<xsl:value-of select="@alpha" />
+					</xsl:attribute>
+				</xsl:otherwise>
+			</xsl:choose>
+
+		</stop>
+	</xsl:template>
+	
+<!-- Text
+
+	<xsl:template match="s:Label" mode="text" >
+	<svg>
+		<text>
+			<xsl:if test="@id">
+				<xsl:attribute name="id">
+					<xsl:value-of select="@id" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:attribute name="text-anchor">middle</xsl:attribute>
+			<xsl:attribute name="pointer-events">none</xsl:attribute>
+			<xsl:attribute name="dy">.3em</xsl:attribute>
+			<xsl:attribute name="x">50%</xsl:attribute>
+			<xsl:attribute name="y">50%</xsl:attribute>Hello</text>
+		</svg>	
+	</xsl:template>	
+	
+ -->
+</xsl:stylesheet>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5253db01/fxg2svg/transform/transform.xslt
----------------------------------------------------------------------
diff --git a/fxg2svg/transform/transform.xslt b/fxg2svg/transform/transform.xslt
new file mode 100644
index 0000000..924759b
--- /dev/null
+++ b/fxg2svg/transform/transform.xslt
@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<xsl:stylesheet version="2.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns="http://www.w3.org/2000/svg">
+
+	<xsl:strip-space elements="s:*" />
+	<xsl:output method="xml" encoding="UTF-8" indent="yes" />
+
+	<xsl:template match="/">
+		<svg id="button" width="100%" height="100%" version="1.1" >
+			<xsl:apply-templates mode="rect" />
+			<xsl:apply-templates mode="text" />
+		</svg>
+	</xsl:template>
+	
+	<xsl:template match="fx:Script" mode="#all" />
+	<xsl:template match="fx:Metadata" mode="#all" />
+	
+	<xsl:template match="s:states" mode="rect">
+			<xsl:for-each select="s:State">
+					<xsl:apply-templates mode="rect" />
+			</xsl:for-each>
+	</xsl:template>
+
+	<xsl:template match="s:Rect|Rect" mode="rect">
+		<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
+			version="1.1" >
+			<xsl:if test="@left">
+				<xsl:attribute name="left">
+					<xsl:value-of select="@left" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@right">
+				<xsl:attribute name="right">
+					<xsl:value-of select="@right" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@top">
+				<xsl:attribute name="top">
+					<xsl:value-of select="@top" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@bottom">
+				<xsl:attribute name="bottom">
+					<xsl:value-of select="@bottom" />
+				</xsl:attribute>
+			</xsl:if>
+			<defs>
+				<xsl:apply-templates mode="defs" />
+			</defs>
+		<rect >
+			<xsl:if test="@id">
+				<xsl:attribute name="id">
+					<xsl:value-of select="@id" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@x">
+				<xsl:attribute name="x">
+					<xsl:value-of select="@x" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@y">
+				<xsl:attribute name="y">
+					<xsl:value-of select="@y" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@width">
+				<xsl:attribute name="width">
+					<xsl:value-of select="@width" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@height">
+				<xsl:attribute name="height">
+					<xsl:value-of select="@height" />
+				</xsl:attribute>
+			</xsl:if>
+
+			<xsl:if test="@radiusX">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusY">
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusX and not(@radiusY)">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusX" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="@radiusY and not(@radiusX)">
+				<xsl:attribute name="rx">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+				<xsl:attribute name="ry">
+					<xsl:value-of select="@radiusY" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(@width) ">
+					<xsl:attribute name="width">100%</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(@height) ">
+					<xsl:attribute name="height">100%</xsl:attribute>
+			</xsl:if>
+			<xsl:if test="not(s:fill) ">
+					<xsl:attribute name="fill">none</xsl:attribute>
+			</xsl:if>
+
+			<xsl:apply-templates mode="rect" />
+
+		</rect>
+</svg>
+	</xsl:template>
+
+	<xsl:template match="s:fill" mode="rect">
+		<xsl:apply-templates mode="rect" />
+	</xsl:template>
+	
+	<xsl:template match="s:stroke" mode="rect">
+		<xsl:apply-templates mode="rect" />
+	</xsl:template>
+
+	<xsl:template match="s:SolidColor" mode="rect">
+		<xsl:attribute name="style">fill:#<xsl:value-of
+			select="substring-after(@color, '0x')" />
+		</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="s:LinearGradient" mode="rect">
+		<xsl:attribute name="style">fill:url(#<xsl:value-of
+			select="generate-id(.)" />)</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="s:LinearGradientStroke" mode="rect">
+		<xsl:attribute name="style">stroke-width:<xsl:value-of select="@weight+1"></xsl:value-of>;stroke:url(#<xsl:value-of
+			select="generate-id(.)" />)</xsl:attribute>
+	</xsl:template>
+	
+	<xsl:template match="//s:LinearGradient" mode="defs">
+		<linearGradient>
+			<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
+			<xsl:if test="@rotation">
+				<xsl:attribute name="gradientTransform">rotate(<xsl:value-of select="@rotation" />)</xsl:attribute>
+			</xsl:if>			
+			<xsl:apply-templates mode="defs" />
+		</linearGradient>
+	</xsl:template>
+	
+		<xsl:template match="//s:LinearGradientStroke" mode="defs">
+			<linearGradient>
+				<xsl:attribute name="id"><xsl:value-of select="generate-id()" /></xsl:attribute>
+				<xsl:apply-templates mode="defs" />
+			</linearGradient>
+	</xsl:template>
+
+	<xsl:template match="//s:GradientEntry" mode="defs">
+		<stop>
+			<xsl:attribute name="offset">
+				<xsl:value-of select="@ratio"></xsl:value-of>
+			</xsl:attribute>
+			<xsl:attribute name="stop-color">#<xsl:value-of
+				select="substring-after(@color, '0x')" />
+			</xsl:attribute>
+			<xsl:if test="@alpha">
+				<xsl:attribute name="stop-opacity">
+					<xsl:value-of select="@alpha" />
+				</xsl:attribute>
+			</xsl:if>
+
+		</stop>
+	</xsl:template>
+	
+<!-- Text
+
+	<xsl:template match="s:Label" mode="text" >
+	<svg>
+		<text>
+			<xsl:if test="@id">
+				<xsl:attribute name="id">
+					<xsl:value-of select="@id" />
+				</xsl:attribute>
+			</xsl:if>
+			<xsl:attribute name="text-anchor">middle</xsl:attribute>
+			<xsl:attribute name="pointer-events">none</xsl:attribute>
+			<xsl:attribute name="dy">.3em</xsl:attribute>
+			<xsl:attribute name="x">50%</xsl:attribute>
+			<xsl:attribute name="y">50%</xsl:attribute>Hello</text>
+		</svg>	
+	</xsl:template>	
+	
+ -->
+</xsl:stylesheet>