3 Replies Latest reply on Sep 12, 2013 9:12 PM by resdesign

    Edge Commons - Interactive Svg Map

    AmintaAdobe Level 1

      Hi folks!


      I've watched the extraordinary video tutorial of the very talented guys from EdgeDocks (http://edgedocks.com) about how to build an Interactive Svg Graphic with Adobe Illustrator and Adobe Edge Animate: http://www.youtube.com/watch?v=4UEB6gaLKuw.


      I've followed the example explained in the video tutorial using a Svg Map file and making selectable one region (the lower right, in light brown color) to try:




      (project files: http://www.terredainventare.it/svg/SvgMap.zip)


      So when I select this regione, Edge Animate replaces the placeholder text with the name of the path ("Isontino"), but when I click the red Ellipse, the color of the region remains in light brown. Why?



      Many thanks in advance for your help!



        • 1. Re: Edge Commons - Interactive Svg Map
          AmintaAdobe Level 1



          Following a precious hint of Simon Widjaja, the author of EdgeCommons libraries,


          I've replaced


          $(selectedPart).css("fill", $(e.currentTarget).css("background-color"));




          $(selectedPart).each(function (index) {

          $( this ).css("fill", $(e.currentTarget).css("background-color"));



          beacuse my "SelectedPart" was a group in Adobe Illustrator and I need to select each element to fill it with color: but it doesn't work.


          Where I am get wrong?


          Here the update project files: http://www.terredainventare.it/svg/SvgMapEach.zip



          Many thanks in advanced!



          1 person found this helpful
          • 2. Re: Edge Commons - Interactive Svg Map
            Papercu7 Level 1

            Hey Davide,

            Where you able to get the interactive SVG working fully? I am currently experience some similar issues.



            • 3. Re: Edge Commons - Interactive Svg Map
              resdesign Adobe Community Professional & MVP

              you have to have the pieces separated. Each layer path can be selected and then you add the code in the svg interactive window.


              I suppose you downloaded his sample.


              If you still have problems, I can look at it.


              It should work well if your svg file is made correctly.


              You can also add code for other interactions with symbol if you need.


              Note that if you have several words for the layer name you will have underscores added. If you have two layers with the same name, a number will be added to the name.

              I have code to remedy this if you need.