1 Reply Latest reply on Mar 19, 2014 8:32 AM by enixon-shapiro

    What am I doing wrong on this interactive SVG? Please help.

    bebebottle2013

      I watched the tutorial on youtube on creating the svg and making an interactive color changing character. I have tried to implement it but I’m not doing something right and am a little lost on the code.  I was wondering if anyone could tell me what I am doing wrong.

       

      The SVG File

      1. Has 18 groups that can color change each in a different layer but not grouped within the layers
      2. The layer names are as follows
        1. Owl_Wing_Spots
        2. Owl_Wings
        3. Owl_Belly
        4. Owl_Body
        5. Trunk
        6. Leaf_Outline
        7. Leaf_1
        8. Leaf_2
        9. Leaf_3
        10. E2_Ear_Spots
        11. E2_Ear_Tail
        12. E2_Body
        13. E1_Ear_Spots
        14. E1_Ear_Tail

               15.  E1_Body

           16. Wall_Color

           17. Bird_Body

           18.   Bird_Butterfly_Wing

       

       

       

      The Edge Animate File

      • I added the SVG file named “elephant_tree2” and then added the following code to the CompositionReady Area

      // Load Edge Commons

      yepnope({

      load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",

      complete: function() {

                              // Enable SVG access

                              EC.accessSVG(sym.$("elephant_tree2")).done(

                                              function(svgDocument){

                                                              // add event listener

                                                              svgDocument.addEventListener("select", function(event) {

       

                                                                              // Remember selected part

                                                                              sym.setVariable("selectedPart", event.target);

       

                                                                              // show the id of the selected part in the textfield

                                                                              sym.$("selectedPartTxt").html( event.target.id );

                                                              });

                              });

              }

      });

      // insert code to be run when the composition is fully loaded here

       

      • I added a selectedPartTxt text box and named it that too.

       

      None of the groups on the SVG are recognized and the selectedPartTxt does not change.  I suspect it may have something to do with the fact there are groups instead of one part but I don’t know how to fix it.

       

      I was also wondering if someone could tell me how to use an SVG for the color chart too instead of recreating it in Edge Animate.  I haven't tried to to the color part of the SVG because I still can't get the mouse click to work when on a group that changes.

       

      Any help would be appreciated.

       

      Thanks!

       

      Cherie