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

Question

大家好！新来的！希望以后能为社会做出应有的贡献。但首先，我需要一些我认为相当简单的东西！

我一直专注于网络的设计方面，所以主要关注 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”的初始颜色是black，但是当用户从页面顶部滚动350px时，我希望颜色变成white。这就是我对“header”和“nav”元素所做的，效果很好。那么，有什么想法吗？

我希望我没有错过一些明显的令人尴尬的事情，哈哈！

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

Answer 1

这里有两个问题。

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

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

您可以做的是在 HTML 中内联 SVG 文件。那么它应该可以工作了。