12 Replies Latest reply on Oct 12, 2014 5:46 AM by PedroJordan

    SVG Manipulation

    PedroJordan Level 1

      hi,

       

      I created a SVG with the Edge Animate, but the graphic stay often down Stage, does anyone know how to solve?

       

      var y1= '10';

      var y2= '20';

      var y3= '30';

      var y4= '120';

      var y5= '50';

      var y6= '40';

      var y7= '30';

      var y8= '20';

      var y9= '10';

       

      var svg = ( '<svg height="500" width="500"> <polygon id="box1" fill="#D04E00" points="500,253.327 43.6,253.327 43.6,'+y1+' 90.128,'+y1+' 136.691,'+y3+' 183.254,'+y4+' 229.783,'+y5+' 276.346,'+y6+' 322.909,'+y7+' 369.437,'+y8+' 500,'+y9+' "/>')

       

      sym.$("body").append(sym.$(svg).css({"position": "top"}));

        • 1. Re: SVG Manipulation
          resdesign Adobe Community Professional & MVP

          Should not you append to Stage instead of "body"?

          • 2. Re: SVG Manipulation
            PedroJordan Level 1

            how?

             

            you say thus?

             

            sym.$(svg).css({"position": "top"});

            • 3. Re: SVG Manipulation
              resdesign Adobe Community Professional & MVP

              Let me sure I understand. You want to load the SVG in Animate, right?

              • 4. Re: SVG Manipulation
                PedroJordan Level 1

                hi,

                 

                Yes, I want to animate the points of the graphic.

                • 5. Re: SVG Manipulation
                  vivekuma Adobe Employee

                  Instead of calling

                       sym.$("body").append(sym.$(svg).css({"position": "top"}));

                  use

                       sym.$("Stage").append(sym.$(svg).css({"position": "top"}));

                   

                  hth,

                  Vivekuma

                  • 6. Re: SVG Manipulation
                    PedroJordan Level 1

                    Thank you!

                     

                     

                    • 7. Re: SVG Manipulation
                      PedroJordan Level 1

                      Do you kwon how manipulate dynamic the points?

                       

                      var y1= '10';

                      var y2= '20';

                      var y3= '30';

                      var y4= '60';

                      var y5= '50';

                      var y6= '40';

                      var y7= '30';

                      var y8= '20';

                      var y9= '10';

                       

                       

                      var sim = sym.$("Symbol_1");

                                    

                      var svg = ( '<svg height="600" width="600"> <polygon id="box1" fill="#D04E00" points="500,253.327 43.6,253.327 43.6,'+y1+' 90.128,'+y1+' 136.691,'+y3+' 183.254,'+y4+' 229.783,'+y5+' 276.346,'+y6+' 322.909,'+y7+' 369.437,'+y8+' 500,'+y9+' "/>')

                       

                       

                      sim.append(sym.$(svg).css());

                      • 8. Re: SVG Manipulation
                        PedroJordan Level 1

                        well, I'm able to get here, but I could not change the points dynamically.

                         

                        var CreateSvg = function(y1,y2,y3,y4,y5,y6,y7,y8,y9){

                        var y1

                        var y2

                        var y3

                        var y4

                        var y5

                        var y6

                        var y7

                        var y8

                        var y9;

                        var sim = sym.$("Stage");

                        var sVg = ( '<svg height="100" width="500"> <polygon id="box1" fill="#D04E00" points="500,253.327 43.6,253.327 43.6,'+y1+' 90.128,'+y1+' 136.691,'+y3+' 183.254,'+y4+' 229.783,'+y5+' 276.346,'+y6+' 322.909,'+y7+' 369.437,'+y8+' 500,'+y9+' "/>')

                         

                        sim.append(sym.$(sVg).css());

                        }

                         

                         

                        CreateSvg(90,80,40,30,20,20,30,0,12)

                         

                        this code is at timeline

                         

                        I'd like change the point dynamically, in another keyframe of timeline!

                        • 9. Re: SVG Manipulation
                          vivekuma Adobe Employee

                          Use this CreateSvg function instead:

                          var CreateSvg = function(y1,y2,y3,y4,y5,y6,y7,y8,y9){

                               var sim = sym.$("Stage");

                               var sVg = ( '<svg height="100" width="500"> <polygon id="box1" fill="#D04E00" points="500,253.327 43.6,253.327 43.6,'+y1+' 90.128,'+y1+' 136.691,'+y3+' 183.254,'+y4+'                     229.783,'+y5+' 276.346,'+y6+' 322.909,'+y7+' 369.437,'+y8+' 500,'+y9+' "/>')

                           

                               sim.append(sym.$(sVg).css());

                          }

                           

                          Since you have declared the variables again in the function, it overwrites the function parameters with "undefined" values.

                          • 10. Re: SVG Manipulation
                            PedroJordan Level 1

                            ok.

                             

                            but if I create this function in Composite ready, and call CreateSvg(90,80,40,30,20,20,30,0,12), on time line, why don't work?

                            • 11. Re: SVG Manipulation
                              vivekuma Adobe Employee

                              If you declare the function like above within compositionReady event handler, the function remains local to the event handler function.

                               

                              To use outside, you need to declare it like this:

                                   this.CreateSvg = function(y1,y2,y3,y4,y5,y6,y7,y8,y9){

                                        var sim = sym.$("Stage");

                                        var sVg = ( '<svg height="100" width="500"> <polygon id="box1" fill="#D04E00" points="500,253.327 43.6,253.327 43.6,'+y1+' 90.128,'+y1+' 136.691,'+y3+'                                183.254,'+y4+'229.783,'+y5+' 276.346,'+y6+' 322.909,'+y7+' 369.437,'+y8+' 500,'+y9+' "/>')

                               

                                        sim.append(sym.$(sVg).css());

                                   }

                               

                              now this function becomes an attribute to the "Stage" symbol, and now you need to call it like:

                                   sym.CreateSvg(90,80,40,30,20,20,30,0,12)

                               

                              hth,

                              Vivekuma

                              • 12. Re: SVG Manipulation
                                PedroJordan Level 1

                                yes, beautiful.

                                 

                                thank you a lot