2 Replies Latest reply on Jun 15, 2014 11:55 PM by Lord-ton

    Changing fill in svg path?

    anotherJensen

      Hi

       

      First: Im sorry if my questions seems stupid but Im completely new at this

       

      I have followed a tutorial that uses a onclick event (set up in illustrator) to chose at path in a svg file and then be able to chang color on that file.

      https://www.youtube.com/watch?v=4UEB6gaLKuw

       

      It works perfectly but I want to be able to just directly change the color of different parts without a click event.

       

      ie. one row of color buttons for the hat, one row for the shirt ansd so on.

       

      I have moved the script from the compositionReady to the  button.click and put in the following code:

       

      yepnope({

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

                complete: function() {

                          // Enable SVG access

                          EC.SVG.accessSVG(sym.$("character")).done(

                                    function(svgDocument){

       

       

                                                        // set color

                                                        $("#hat", svgDocument).css("fill", $(e.currentTarget).css("background-color") );

                                    }

                                    );

                                    }

                         });

       

      And it works! - but only the first time... the rest of the buttons wont do a thing ;(

       

      And I guess its bat practice to load the edgeCommons every time the user intercts, but I havent been able to get it to work when loading in compositionReady.

       

      Hope you can help me

       

      Bonus:

      The colorshift of the svg is rather "ugly" - the whole svg file blinks... is it possible to make a smoother transition?