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

Question

嗨伙计！ 新来的！ 希望将来能为社区做出可观的贡献。 但是首先，我需要一个我认为非常简单的东西！

我一直都在关注Web的设计方面，因此主要集中在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时，我希望颜色更改为白色 。 那就是我对“ header”和“ nav”元素所做的，它们工作得很好。 那么，有什么想法吗？

我希望我没有错过令人尴尬的显而易见的事情，哈哈！

谢谢你们能提供的任何帮助！

Answer 1

这里有两个错误。

1. 您不能像这样直接访问<object>的内容。 您需要获取contentDocument并以这种方式访问​​它。

2. CSS无法跨文档边界工作。 即使将iconfade类添加到#icon ，它也将无法看到它，因为CSS位于其他文档中。

您可以做的就是在HTML中内联SVG文件。 那应该可以了。