Desvanece el color de un SVG personalizado usando Javascript/jQuery al pasar el mouse

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>

¿Hay alguna manera de

  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.

¿Alguna idea?

preguntado el 27 de noviembre de 13 a las 00:11

Mira esto complemento.svg, 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: snapsvg.io/start. It will show you what you want to do. -

I will take a look and get back to you. If this works, I would gladly accept this as an answer -

if you give it a go, and get a bit stuck I'll be happy to help you further. -

posible duplicado de Modificar un archivo svg usando jQuery -

@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! -

2 Respuestas

Snap.svg is a perfect solution for this.

Snap.svg is a javascript library for animating and interacting with svgs. Their 'Getting Started' tutorial es un buen lugar para empezar.

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 documentación explains all the available functions.

Respondido el 20 de junio de 20 a las 10:06

Thank you greatly! I used jquery-colors as well. I was able to add fill y stroke con jQuery.Color.hook( "fill stroke" ); a continuación, utilizar .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! - ntglimpiador

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.

Respondido el 04 de diciembre de 13 a las 04:12

You can inject CSS into the svg, as described in stackoverflow.com/questions/4906148/…. I assume you meant <img> and not <image> btw, and note that <object> does give access to the DOM, but the svg will be in a separate document. - Erik Dahlström

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.