在悬停时使用Javascript/jQuery淡出自定义SVG的颜色

我试图根据某些变量定制SVG的颜色。为了便于理解，我希望能够使用jQuery淡出悬停时SVG的颜色。我已经创建了一个自定义SVG，并将其链接到

我已经通过

嵌入了SVG，但不确定在哪里可以更改SVG的颜色。我之所以使用

，是因为它显然更兼容更多的浏览器。（如果有更好的办法，请告诉我）

有没有办法去

更改SVG的颜色

将该颜色设置为另一种颜色

我已经在使用jquery-color.js，我想我将不得不使用另一个插件来与SVG对话

---

有什么想法吗？

您不能使用CSS来更改嵌入对象的内容。这包括通过

或

嵌入的SVG。这些元素不表示DOM，因此它们内部的SVG元素无法通过CSS规则进行寻址。

是一个完美的解决方案。 svg是一个javascript库，用于设置svg动画并与之交互。 这是一个很好的起点

就实际代码而言，以下内容将帮助您实现所需（摘自链接教程）：

希望这有帮助。

---

解释了所有可用的函数。

看看，这是一个javascript库，使使用SVG变得非常简单。您可以使用它修改svg部分的颜色，甚至可以设置颜色更改的动画。请在此处查看他们的快速教程：。它会告诉你你想做什么。我会看一看，然后再给你回复。如果这能奏效，我很乐意接受你的回答。如果你尝试一下，我会很乐意进一步帮助你。可能重复@OACDesigns的回答很好！请将此作为答案发布，以便我可以给您评分！我只需要把整个剧本的一部分删掉，但这绝对是值得的！非常感谢！我也使用jquery颜色。我能够使用

jQuery.Color.hook（“填充笔划”）添加
fill
和
stroke

然后使用

.load（function（）{..}）

在我想要的位置加载SVG。然后我可以像普通一样使用

.animate（）

——使用填充作为我可以设置动画的样式！您可以将CSS注入svg，如中所述。我想你的意思不是顺便说一句，注意这确实提供了对DOM的访问，但是svg将在一个单独的文档中。

//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);
    });

});