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

【问题标题】：Fade the color of a custom SVG using Javascript/jQuery on hover在悬停时使用 Javascript/jQuery 淡化自定义 SVG 的颜色
【发布时间】：2015-04-24 06:10:51
【问题描述】：

我正在尝试根据某些变量自定义 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>

有什么办法

更改 SVG 的颜色
将该颜色设置为另一种颜色？

我已经在使用 jquery-color.js，我想我必须使用另一个插件才能与 SVG 对话。

有什么想法吗？

【问题讨论】：

看看snap.svg，它是一个让使用svgs 变得非常容易的javascript 库。您将能够使用它来修改 svg 部分的颜色，甚至可以为颜色变化设置动画。在此处查看他们的快速教程：snapsvg.io/start。它会告诉你你想做什么。
我会看看并回复你。如果这可行，我很乐意接受这个作为答案
如果您试一试，但遇到了一点困难，我很乐意为您提供进一步的帮助。
Modify a svg file using jQuery 的可能副本
@OACDesigns 很好的答案！请将此作为答案发布，以便我给予您信任！我只需要整个脚本的片段，但这绝对值得！

标签： javascript jquery html css svg

【解决方案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 解释了所有可用的功能。

【讨论】：

非常感谢！我也使用了 jquery-colors。我能够添加fill 和stroke 和jQuery.Color.hook( "fill stroke" );，然后使用.load(function(){..}) 在我想要的位置加载SVG。然后我可以像往常一样使用.animate() - 使用填充作为我可以制作动画的样式！

【解决方案2】：

您不能使用 CSS 来更改嵌入对象的内容。这包括通过<img> 或<object> 嵌入的SVG。这些元素不呈现 DOM，因此无法通过 CSS 规则处理其中的 SVG 元素。

【讨论】：

您可以将 CSS 注入 svg，如 stackoverflow.com/questions/4906148/… 中所述。我假设您的意思是而不是顺便说一句，请注意