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

大家好！新来的！希望将来能为社会做出相当大的贡献。但首先，我需要一只手来做一些我认为相当简单的事情

我一直都在关注web的设计方面，所以主要关注HTML和CSS。我最近才开始学习JavaScript/jQuery，所以请容忍我，哈哈

我在使用jQuery更改SVG形状的颜色时遇到了一些问题。其基本思想是，当用户向下滚动页面时，某些元素会改变颜色。HTML元素会按预期更改，但SVG属性不会更改。我读过一些关于SVG DOM不同于HTMLDOM的文章，但我真的不太明白它的意思吗？一个小的解释和任何帮助都不会被忽视

这是我的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>

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;
}

$(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");
    }
});

这是我的jQuery:

<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>

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;
}

$(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");
    }
});

“图标”的初始颜色是黑色，但当用户从页面顶部滚动350px时，我希望颜色变为白色。这就是我对“header”和“nav”元素所做的，它们工作得非常好。有什么想法吗

我希望我没有错过一些令人尴尬的显而易见的东西，哈哈

---

谢谢你们提供的帮助，伙计们这里有两件事不对

您不能像那样直接访问

的内容。您需要获取

contentDocument

并以这种方式访问它

CSS不能跨文档边界工作。即使将

iconfade

类添加到

#icon

，它也无法看到它，因为CSS位于不同的文档中

---

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

所以当你向下滚动时，add/removeClass可以用于header和nav，但不适用于#icon？你有没有检查过当你向下滚动时类被添加到#icon？没错，是的-它对#icon不起作用。我已经使用Safari的JavaScript profiler进行了检查，该类被添加到header和nav中，但没有添加到SVG文件中的#图标中。我认为问题在于您使用的是

对象
元素，而不是
SVG
元素。尝试将所有的
svg
代码放入DOMTry$（“#icon”）.attr（“class”，“iconfade”）中添加类，并将$（“#icon”）.attr（“class”）删除类。不幸的是，这些解决方案似乎都不起作用？我很确定我也正确地实现了它们……嗯，好的。我已经将CSS文档与SVG文档链接了，这无关紧要吗？此外，使用内联SVG似乎没有什么不同。请继续使用。CSS不能与SVG文档对话的说法是完全正确的。使用内联SVG最初不起作用，但我将CSS选择器“#icon”更改为“path#icon”，效果非常好。颜色果然变了！我唯一的问题是，SVG代码相当长。这是HTML中令人头痛的问题。外部SVG文档是否也可以这样做？您没有提供SVG，因此我无法说出其中包含的内容。您是否尝试将样式放入SVG中？i、 e./*SVG特有的奇特CSS样式在这里*/。。。