4 Replies Latest reply on Jun 3, 2010 1:18 PM by aligned2009

    Better SVG support in Flex?

      Flex 2 (and 3) at this time only allows for SVG files to be embedded in an application and there seem to be no mechanism to dynamically load or update SVG images through scripting. Given that Flex has no support for maps, having the ability to dynamically load or alter SVG files in a Flex application would be of tremendous benefit to the platform. I assume that this comes from the fact that the flash player does not include an SVG viewer. Is there an workaround this problem or any plans to see dynamic SVG support in future releases of Flex? Given that Adobe wants to be leader in the SVG integration ( http://www.adobe.com/svg/) and has one of the most popular viewer (though it's being discontinued), maybe this could come in Flash 10 or be integrated in AIR?
      thanks
      *P
        • 1. Re: Better SVG support in Flex?
          leonchaves
          I would like to add my voice to this chorus. Such a support in flex platform is very important in my opinion. Concurrent platforms like Openlaszlo are a little bit ahead in this matter. In order to make map based applications this is a must have feature.
          • 2. Re: Better SVG support in Flex?
            aligned2009 Level 1

            I need this feature as well.

             

            If I could integrate some SVG shapes into an  HTML document and make it “javascriptable” as if it was a real SVG node  in my DOM tree…

             

            For instance if I had two vertices connected with an edge, I'd like to be able to mouse over the edge, change it's color, and when the edge is clicked on create an event. Is this possible today?

            • 3. Re: Better SVG support in Flex?
              David_F57 Level 5

              hi,

               

              In flex 4 you can load svg data and manipulate it fill,stroke etc. Only simple svg is supported but thats not a big issue

               

              the following uses a string for data (couldn't be bothered writing the load code, so dynamic change with a string the same), you can change fill mouseover is enabled only for nontransparent areas which is ideal for regions.

               

              David.

               

              <?xml version="1.0" encoding="utf-8"?>

              <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">

              <fx:Declarations>

              <s:SolidColorStroke id="defaultStroke" color="{NormColor}" weight="2" alpha="0.6"/>

              <s:SolidColor id="defaultFill" color="{NormColor}" alpha="0.5"/>

              <s:SolidColor id="hiLiteFill" color="{OverColor}" alpha="0.5"/>

              </fx:Declarations>

              <fx:Script>

              <![CDATA[

              [Bindable] private var NormColor: int = 0xFF00FF;

              [Bindable] private var OverColor: int = 0x55FF55;

              private var svgPath:String = "M6.115,27.036L0,18l6.115-8.98v5.972c5.896,0,8.856-2.986,8.856-9.109H9.051L18,0l8.966,5.8 83"+

              "h-5.972c0,6.123,2.986,9.109,9.059,9.109V9.02L36,18l-5.947,9.036v-6.072c-6.072,0-9.059,3.0 36-9.059,9.159h5.972L18," +

              "36l-9.152-5.877h6.124c0-6.123-3.062-9.159-8.856-9.159V27.036z";

               

              protected function button1_clickHandler(event:MouseEvent):void

              {

              svg.data = svgPath;

              }

               

              protected function group1_mouseOverHandler(event:MouseEvent):void

              {

              svg.fill = hiLiteFill;

              }

               

              ]]>

              </fx:Script>

              <s:Group x="111" y="93" width="109" height="94" mouseEnabledWhereTransparent="false" mouseOver="svg.fill = hiLiteFill" mouseOut="svg.fill = defaultFill">

              <s:Path id="svg" top="0" left="0" bottom="0" right="0" fill="{defaultFill}" stroke="{defaultStroke}"/>

              </s:Group>

              <s:Button x="111" y="41" label="Button" click="button1_clickHandler(event)"/>

              </s:Application>

              • 4. Re: Better SVG support in Flex?
                aligned2009 Level 1

                Finally bought the upgrade for Flex 4 and tried your example. Unfortunately, I don't think it's what I'm looking for. As an example of two nodes with an edge:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
                <circle id="C" fill="#FFFFFF" stroke="#000000" cx="311" cy="211" r="28.5"/>
                <circle id="B" fill="#FFFFFF" stroke="#000000" cx="549" cy="310" r="39.5"/>
                <line id="A" fill="none" stroke="#000000" x1="335.5" y1="223.5" x2="511.5" y2="295.5"/>
                </svg>

                 

                If this object is loaded into svgObject, I'd like to do something like

                 

                svgObject.A.addEventListener(MouseEvent.CLICK, someFunction);