14 Replies Latest reply on Nov 25, 2012 7:17 AM by DarioMatson

    Change color of an object inside svg image?

    DarioMatson Level 1

      Hi,

       

      I want to draw an animal with multiple fill colors, but creating a different image for each color doesn't sound reasonable. So maybe it would be possible to change the color of the svg image with help of code.

      I found the following options:

      http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jqu ery-svg-image-replacement

      or

      http://keith-wood.name/svg.html

       

      But i get timeline errors with both options - going crazy.

      Maybe someone here could create an example on how to change the color of the svg image added into stage with a click of a button?

       

      Thank You

        • 1. Re: Change color of an object inside svg image?
          joel_pau Level 5

          Hi Dario,

           

          Here is a first version: file attached.

          I will improve later.

          • 2. Re: Change color of an object inside svg image?
            DarioMatson Level 1

            Hi,

             

            Thank You for Your reply.

            This doesn't help me very much yet though (i'm needy, but not able to do the following myself).

            1. The position of the image changes with the code added (position not absolute? I need several images on top of each other without their position being changed - both svg files and i need to access them separately).

            2. How can i access the id and change the fill with click?

             

            Thank You

            • 3. Re: Change color of an object inside svg image?
              joel_pau Level 5

              Well, you can send me your project file.

              Here is a second version: file attached.

               

              compositionReady:

                       /* Version 2: without css file, with svg located, and with mouse effects.

                          Replace all SVG images with inline SVG */

               

                       $('img.svg').each( function(){

                          var $img = $(this);

                          var imgID = $img.attr('id'), imgClass = $img.attr('class'), imgURL = $img.attr('src');

                          /* New line: returns image position */

                          var position = $img.position();

               

                          $.get(imgURL, function(data) {

                              // Get the SVG tag, ignore the rest

                              var $svg = $(data).find('svg');

                              // Add replaced image's ID to the new SVG

                              if(typeof imgID !== 'undefined') { $svg = $svg.attr('id', imgID); }

                              // Add replaced image's classes to the new SVG

                              if(typeof imgClass !== 'undefined') { $svg = $svg.attr('class', imgClass+' replaced-svg'); }

                              // Remove any invalid XML tags as per http://validator.w3.org

                              $svg = $svg.removeAttr('xmlns:a');

                              // Replace image with new SVG

                              $img.replaceWith($svg);

                              /* New line: svg position */

                              $svg.css({"position": "relative", "left": position.left, "top": position.top});

                              /* New line: mouse effect */

                              $svg.hover(

                                              function(){

                                                              $('path').css("fill", "red");

                                                              $('rect').css("fill", "green");},

                                              function(){

                                                              $('path').css("fill", "");

                                                              $('rect').css("fill", "");}

                                              );

                              });

                       });

                       /* Code adapted from: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html */

               

              Note: You can replace .hover() by .toggle() to get a click effect.

              • 4. Re: Change color of an object inside svg image?
                DarioMatson Level 1

                Hi again,

                 

                I attached an example of what i wish to achieve.

                Your example unfortunately does nothing for my files. Or i'm holding the code in a wrong place (which is definitely more accurate) or or or...

                 

                http://www.noha.ee/example.zip

                 

                I would be most greatful, if You could help me out.

                 

                Note!

                I after uploading copied Your code to composition ready, which did nothing either

                I also changed the "path" to "rect", which was needed for the example images. Still nothing.



                $svg.$('rect').css("fill", "red");
                • 5. Re: Change color of an object inside svg image?
                  joel_pau Level 5

                  Disadvantages of copy and paste.

                  Your stackoverflow link runs fine if you have a single file svg on Stage.

                  $('img.svg') doesn't return svg files.

                  So, this code have to be rewrite. I will post a third version.

                  • 6. Re: Change color of an object inside svg image?
                    DarioMatson Level 1

                    Hi,

                    Thank You, will be waiting.

                    Also might be a stupid question, but... if i remove the object (containing the svg's) later, will the changed svg be removed as well or will it eventually (by adding and removing the objects) increase the memory usage?

                    E.g. if i remove the object by the following method, will the svg's removed as well:

                     

                    var onLocationChildSymbols = sym.getComposition().getStage().getChildSymbols();

                                                           $(onLocationChildSymbols).each(function(){

                                                                               if (this.getVariable("type")=="rectangle"){

                    /*when creating the object i added type=rectangle, to later be able to identify it. Haven't found another way, e.g. without going over all childsymbols*/

                                                                                         this.deleteSymbol();

                                                                               }

                                                                                });

                    • 7. Re: Change color of an object inside svg image?
                      joel_pau Level 5

                      So, here are 2 test files:

                      ==> stackoverflow file;

                      ==> your demo file (update).

                      Can you test these files? What's your browser? Your OS?

                      Demo file: black rectangle became yellow, red rectangle became white. Do you want this?

                       

                      This code can be avoided.

                      var onLocationChildSymbols = sym.getComposition().getStage().getChildSymbols();

                      $(onLocationChildSymbols).each(function(){

                      if (this.getVariable("type")=="rectangle"){

                      /*when creating the object i added type=rectangle, to later be able to identify it.

                      Haven't found another way, e.g. without going over all childsymbols*/

                      this.deleteSymbol();

                      }

                      });

                      It's better to create a variable (a shortcut) rather than browse your html page once again.

                      I didn't complete my tests. Attachments are drafts.

                      • 8. Re: Change color of an object inside svg image?
                        DarioMatson Level 1

                        Hi,

                         

                        I got it working, but the problem currently is that i will have several of these "rectangles" objects. And when it changes the colors. It does that for all. So currently i'm back where i started. No animal will be of different color (just different from the base picture, but not unique).

                         

                        I thought of two options. None of which i was able to implement :S.

                         

                        Option1:

                        create one rectangles object

                        Change the images of that object

                        Color images of that rectangles object to what i want... e.g. brown.

                        create another rectangles object and then change the images to white.

                         

                        Attached what i was able to come up this far...

                        www.noha.ee/example3.zip


                        Option2 (something from Your stackoverflow example, but i don't know how to access the changed image later):

                        create all rectangles objects.

                        Change all pictures.

                        Find first object, change it's images, find second object, change it's images and so on (i'd prefer option1, because i don't need to change every svg image on my composition, just the animals, but if there's no other way...).

                         

                        About the deletion of the buttons. I got it working by creating a variable (had return currentbutton: missing). But i don't keep track of the items i create (i get the information from an xml file, e.g. the amount will vary every time i send a new request). So i think, i am still on the right track with finding all the items and only deleting the type of items needed - don't have to create a new unique variable each time (i don't hold them on the stage but in a container, so it shouldn't be that much harder for the cpu?).

                         

                        Thank You,

                        Dario

                        • 9. Re: Change color of an object inside svg image?
                          joel_pau Level 5

                          Well, i thought you wanted to recolor blue rectangles for instance.

                          So, "It does that for all" because rect ids are not unique.

                          This issue can be solved by adding class or change id (one tag = one id).

                          The fourth version is coming soon.

                          • 10. Re: Change color of an object inside svg image?
                            DarioMatson Level 1

                            Hi,

                             

                            I also noticed that when i

                            1. Change the "animalHead" img object in Edge source image from notfound.svg to animal1.svg 

                            2. Then change the svg to whatever the code does.

                            3. Try to change the source later through the same "animalHead" img object (previously my animal's mouth was closed, i now want to open it).

                            It says that "animalHead" source is undefined. Thus nothing is changed when i try to again change the source.

                            Would the changed image still be somehow accessible this way as well?

                             

                            Thank You,

                            Dario

                            • 11. Re: Change color of an object inside svg image?
                              joel_pau Level 5

                              Well, i changed your file.

                              Here is a file:

                              1) img ==> svg

                              2) one animal = one color.

                               

                              file attached.

                               

                              Now, i am trying to understand your file (example3.zip) and your issues.

                               

                              file attached_2.

                               

                              I don't understand your variables: button, color. What's your goal?

                              function changeButtonColorsF(button,color)

                              var colorize = sym.getVariable("changeButtonColors");

                              colorize(currentButton,color);

                              return currentButton;

                              • 12. Re: Change color of an object inside svg image?
                                DarioMatson Level 1

                                Hi,

                                Thank You so much. Got it working. Now on the click of the button, animals change their color.

                                I did it a little bit differently though. I added the id while changing the image (so that i'd know from which image it comes from and now I don't have to deal with indexes and going through them to find the correct image).

                                 

                                I still have a few questons though.

                                In my example here: http://www.noha.ee/example4.zip

                                1. This one i can live without:

                                Why doesn't edge wait for the images change to finish before it moves on to the next function? I don't want to continue to the next function from the previous one, but from one place.

                                2. This one i can't wrap my head around neither can i work around this:

                                I now want to change the file2.svg (which is changed from $img to $svg) to circle.svg.

                                E.g. i want my animal's open mouth to change to closed mouth.

                                E.g. remove the svg that came from file2.svg and replace it with svg that comes from circle.svg (and naturally i need to recolorize this).

                                There's also a limitation. The image's position alone is not important, the new image must stay behind other objects if it was previously behind other objects (mouth stays behind hair, but in front of something else).

                                 

                                Thank You,

                                Dario

                                • 13. Re: Change color of an object inside svg image?
                                  joel_pau Level 5

                                  Here is an optimized version (less code and browsing): file attached.

                                   

                                  About 1.

                                  What functions are you talking about [.createRect(), .changeImages(), .colorizeParts()]?

                                  These functions: What's order? What's place?

                                  One function = one task. Do you have a task list?

                                   

                                  About 2.

                                  21. You can hide then show open mouth or closed mouth.

                                  22. You can use several jQuery functions : .css(z-index) or before() or after(). Perhaps, .map().

                                  • 14. Re: Change color of an object inside svg image?
                                    DarioMatson Level 1

                                    Thank You,

                                    Got everything working.