如何使用jQuery更改SVG形状的颜色？

嗨，伙计们！新来的！希望将来能为社区贡献一笔相当可观的金额。但首先，我需要一个我认为相当简单的东西！如何使用jQuery更改SVG形状的颜色？

我一直都是关于网页的设计方面，所以主要集中在HTML和CSS。我最近才开始学习JavaScript/jQuery，所以请耐心等待，哈哈！

我在使用jQuery改变SVG形状的颜色时遇到了一些麻烦。基本的想法是，当用户向下滚动页面时，某些元素会改变颜色。 HTML元素会按预期更改，但SVG属性不会。我读过一些关于SVG DOM与HTML DOM不同的东西，但是不能真正理解它吗？一个小的解释以及任何帮助都不会被忽略！

这里是我的HTML：

<header> 
    <div id="headercontainer"> 
     <object id="logo" type="image/svg+xml" data="images/kennyheardlogo.svg"></object> 
     <nav><a id="homelink" href="index.html">HOME</a> | <a id="aboutlink" href="index.html">ABOUT</a> | <a id="worklink" href="index.html">WORK</a> | <a id="sociallink" href="index.html">SOCIAL</a></nav> 
    </div> 
</header>

这里是我的CSS：

header { 
    position: fixed; 
    z-index: 1; 
    width: 100%; 
    height: 150px; 
    background-color: #ffffff; 
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); 
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); 
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); 
    opacity: 0.8; 
    -webkit-transition: background-color 0.5s ease; 
    -moz-transition: background-color 0.5s ease; 
    transition: background-color 0.5s ease; 
} 

.headerfade { 
    background-color: #000000; 
} 

nav { 
    position: absolute; 
    top: 65px; 
    right: 40px; 
    width: 480px; 
    height: auto; 
    color: #000000; 
    text-align: center; 
    letter-spacing: 10px; 
    font-size: 10px; 
} 

nav, nav a { 
    -webkit-transition: color 0.5s ease; 
    -moz-transition: color 0.5s ease; 
    transition: color 0.5s ease; 
} 

.navfade { 
    color: #ffffff !important; 
} 

#icon { 
    fill: #000000; 
} 

.iconfade { 
    fill: #ffffff; 
} 

#letterk, #letterh { 
    fill: #ffffff; 
} 

#text path { 
    fill: #000000; 
}

这里是我的jQuery：

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 350) { 
     $("header").addClass("headerfade"); 
     $("nav, nav a").addClass("navfade"); 
     $("#icon").addClass("iconfade"); 
    } else { 
     $("header").removeClass("headerfade"); 
     $("nav, nav a").removeClass("navfade"); 
     $("#icon").removeClass("iconfade"); 
    } 
});

的“#icon”的初始颜色是黑色，但是当用户从页面顶部滚动350px时，我想将颜色更改为白色。这就是我对“标题”和“导航”元素所做的完美工作。那么，有什么想法？

我希望我没有遗漏一些尴尬明显的东西，哈哈！

感谢您提供任何帮助，伙计们！

来源

2014-09-02 Kenny Heard

因此，当向下滚动时，添加/删除类别适用于标题和导航栏，但对#icon不起作用？当你向下滚动时，你有没有检查过该课程是否添加到#icon中？ – artm 2014-09-02 00:12:09

确切的说，是的，它不适用于#icon。我已经使用Safari的JavaScript分析器进行了检查，并将该类添加到标题和导航栏中，但不添加到SVG文件中的#icon。 – 2014-09-02 00:18:27

我认为问题在于你使用的是'object'元素而不是'svg'元素。尝试使用所有'svg'代码并将其放入DOM – haxxxton 2014-09-02 00:22:30

这里有两个错误。

您不能直接访问这样的<object>的内容。您需要获得contentDocument并以此方式访问它。
CSS不跨越文档边界工作。即使您将iconfade类添加到#icon，也无法看到它，因为CSS位于不同的文档中。

你可以做的是在你的HTML中内联SVG文件。它应该工作。

来源

2014-09-02 00:25:07

嗯，好的。我将CSS文档与SVG文档链接起来无关紧要吗？另外，使用内联SVG似乎没有什么区别。 – 2014-09-02 00:36:07

玩过这个更多。对于CSS无法与SVG文档进行交谈，您绝对正确。使用内联SVG最初并不起作用，但我将CSS选择器“#icon”更改为“path #icon”，并且完美运行。颜色随预期而改变！我唯一的问题是，SVG代码很长。这在HTML中很让人头疼。无论如何用外部SVG文档来做到这一点？ – 2014-09-02 01:11:38

你没有提供SVG，所以我不知道它里面有什么。 – 2014-09-02 01:45:20

如何使用jQuery更改SVG形状的颜色？

回答

相关问题