flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bigosma...@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
Date Mon, 01 Apr 2013 19:34:15 GMT
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>


Mime
View raw message