javascript - 使用设置属性更改 svg 返回错误

Question

我尝试用jQuery实现改变svg图片的效果。我的代码在浏览器中运行，但在控制台中返回错误。我想删除错误。我该怎么办？

错误

(unknown) Uncaught TypeError: a[b].target.className.indexOf is not a function

jQuery

    $(document).ready(function() {
    $(window).scroll(function(){
        var ScrollTop = parseInt($(window).scrollTop());
        if(ScrollTop > 150) {
            $(".outer-wrapper").css("border-bottom","1px solid #cdc8c7");
            $(".svg--logo").find("use").attr("xlink:href", "#billie-logo-sml");
        } else {
            $(".outer-wrapper").css("border-bottom","");
            $(".svg--logo").find("use").attr("xlink:href", "#billie-logo");
        }
    })
})

HTML

<div class="header-item">
<a class="logo" href="{{ site.baseurl }}/">
  <svg class="svg--logo">
    <title>Billie Logo</title>
    <use xlink:href="#billie-logo"/>
  </svg>
</a>

Answer 1

您将不能在这里使用 jQuery。 jQuery 假定所有元素都是 HTML 并具有相应的接口(interface)。但是在 HTML 中，Element.className 接口(interface)是一个字符串，而在 SVG 中，接口(interface) SVGElement.className 是一个 SVGAnimatedString(它是一个具有属性 baseVal 和 animVal 的对象)。

错误不在您的代码中，而是在 jQuery 的内部工作机制中。我什至不能告诉你它的确切位置，因为没有明显的理由说明为什么 jQuery 需要找出字符在类属性中的位置——错误消息似乎就是这样。

我完全看不出您需要使用 jQuery 的充分理由。使用 SVG 意味着无论如何都不支持 Internet Explorer 8，这意味着您可以使用纯 Javascript 而不会破坏任何东西:

document.addEventListener("load", function() {
    window.addEventListener("scroll", function() {
        var ScrollTop = Math.round(window.pageYOffset); // window.scrollY won't work in IE9+
        if(ScrollTop > 150) {
            document.querySelector(".outer-wrapper").style["border-bottom"] = "1px solid #cdc8c7";
            document.querySelector(".svg--logo use").setAttribute("xlink:href", "#billie-logo-sml");
        } else {
            document.querySelector(".outer-wrapper").style["border-bottom"] = "";
            document.querySelector(".svg--logo use").setAttribute("xlink:href", "#billie-logo");
        }
    });
});

请注意，Element.querySelector 只会找到第一个匹配的元素。如果有多个元素，则需要使用 Element.querySelectorAll 并循环遍历生成的 Iterable。