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

Question

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

我通过 <object> 嵌入了 SVG但不确定在哪里可以更改 SVG 的颜色。我正在使用 <object>因为它显然与更多浏览器兼容。 (如果有更好的方法，请告诉我)。

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

有什么办法可以

1. 更改 SVG 的颜色
2. 将该颜色动画化为另一种颜色？

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

有什么想法吗？

Answer 1

Snap.svg是一个完美的解决方案。

Snap.svg 是一个用于对 svg 进行动画处理和交互的 javascript 库。 他们的'Getting Started' 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);
    });

});

希望这对您有所帮助。 documentation解释了所有可用的功能。