1

I am trying to customize a color of an SVG depending on certain variables. To make it easy to understand, I want to be able to fade the color of an SVG on hover using jQuery. I have created a custom SVG and am linking it in

I've embedded the SVG via <object> but am unsure of where I am able to change the color of the SVG. I am using <object> because It is apparently more compatible with more browsers. (If there is a better way, please let me know).

<object class="nav_ico" id="nav_ico-collective" type="image/svg+xml" data="global/images/nav_ico-collective.svg"></object>

Is there any way to

  1. Change the color of the SVG
  2. Animate that color to another one?

I am already using jquery-color.js and I assume I will have to use another plugin just to talk to the SVG.

Any ideas?

ntgCleaner
  • 5,865
  • 9
  • 48
  • 86
  • 1
    have a look at [snap.svg](http://snapsvg.io/), it's a javascript library that makes working with svgs really easy. You'll be able to modify the colour of parts of your svg with it, and even animate the colour changes. Check out their quick tutorial here: http://snapsvg.io/start/. It will show you what you want to do. – OACDesigns Nov 27 '13 at 01:12
  • I will take a look and get back to you. If this works, I would gladly accept this as an answer – ntgCleaner Nov 27 '13 at 01:15
  • if you give it a go, and get a bit stuck I'll be happy to help you further. – OACDesigns Nov 27 '13 at 01:17
  • possible duplicate of [Modify a svg file using jQuery](http://stackoverflow.com/questions/5638431/modify-a-svg-file-using-jquery) – Robert Longson Nov 27 '13 at 01:22
  • @OACDesigns Great answer! Please post this as an answer so I may give you credit! I only needed to pieces of the entire script, but it definitely made it worth it! – ntgCleaner Nov 27 '13 at 18:34
  • glad I could be of help. I've posted an answer for anyone else that might come accross this question...even added in a bit of code. SO tends to prefer if answers actually contain code after all ;) – OACDesigns Nov 27 '13 at 19:48

2 Answers2

3

Snap.svg is a perfect solution for this.

Snap.svg is a javascript library for animating and interacting with svgs. Their 'Getting Started' tutorial is a good place to start.

In terms of actual code, the following should help you achieve what you desire (taken from the linked tutorial):

//create a new instance of Snap, specifying the svg element to use
var s = Snap("#svg");

//load your svg as a fragment
Snap.load("yourfile.svg", function (f) {
    //you can change the colour of your polygons/paths/lines/etc
    f.selectAll("polygon").attr({fill: "#bada55"});
    
    //and then append the fragment to the page
    g = f.select("g");       
    s.append(g);

    //now we can animate the polygons/paths/lines etc
    g.selectAll("polygon").forEach(function(element){
        element.animate({fill: "#f00"}, 2000);
    });

});

Hope this helps. The documentation explains all the available functions.

Community
  • 1
  • 1
OACDesigns
  • 2,279
  • 14
  • 24
  • Thank you greatly! I used jquery-colors as well. I was able to add `fill` and `stroke` with `jQuery.Color.hook( "fill stroke" );` then use `.load(function(){..})` to load the SVG in the spot that I would like. Then I can use `.animate()` like normal - with fill as the style I can animate! – ntgCleaner Nov 27 '13 at 21:15
0

You can't use CSS to alter the contents of an embedded object. This includes SVGs embedded via <img> or <object>. Those elements don't present a DOM and so the SVG elements inside them can't be addressed via CSS rules.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • You can inject CSS into the svg, as described in http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg. I assume you meant and not btw, and note that does give access to the DOM, but the svg will be in a separate document. – Erik Dahlström Dec 03 '13 at 10:18