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.


      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


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

      complete: function() {

                              // Enable SVG access



                                                              // 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.