Changing svg by using setting attribute returns error

Question

I try to implement the effect of changing svg images by using jQuery. My code works in the browser but it returns error in the console. I want to remove the error. What should I do?

Error

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

ccprog · Accepted Answer · 2018-01-15 16:30:49Z

2

You won't be able to use jQuery here. jQuery assumes all elements to be HTML and to have interfaces accordingly. But while in HTML the Element.className interface is a string, in SVG the interface SVGElement.className is a SVGAnimatedString (which is an Object with properties baseVal and animVal).

The error is not in your code, but inside the inner workings of jQuery. I can't even tell you exactly where it is, because there is no obvious reason why jQuery would need to find out the position of a character inside the class attribute - that is what the error message seems to be about.

I can't see a good reason why you would need to use jQuery at all. Using SVG means Internet Explorer 8 isn't supported anyway, and that means you can use plain Javascript without breaking anything:

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

Note that Element.querySelector only finds the first matching element. If there are multiple elements, you need to use Element.querySelectorAll and loop over the resulting Iterable.

answered Jan 15, 2018 at 16:30

ccprog

22.2k4 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

aaayumi Over a year ago

also this error only shown in google chrome. error does not show up in safari and firefox.

ccprog Over a year ago

Are you sure the error is raised by this event routine? Check the calls stack closely.

aaayumi Over a year ago

Yes. it's sure. When I commented out document.querySelector("use").setAttribute("xlink:href", "#billie-logo-sml"); , no error comes up in the console.

ccprog Over a year ago

And what does the call stack say?

aaayumi Over a year ago

it shows Error at (index):373 I use jekyll and files are compiled to index.html.

|

aaayumi · Accepted Answer · 2018-01-16 17:23:33Z

In the end, I decided to use CSS background-image as there is some issue between SVG and HTML/JavaScript. It works fine. I will show part of my code.

Javascript

  $(window).scroll(function() {
    var scrollTop = Math.round(window.pageYOffset); // window.scrollY won't work in IE9+
    var elm = document.getElementById("logo");
    if(scrollTop > 30) {
        $(".outer-wrapper").css("border-bottom","1px solid #cdc8c7");
        $(".svg--logo").addClass('small');
        $(".svg--logo").removeClass('large');
    } else {
        $(".outer-wrapper").css("border-bottom","");
        $(".svg--logo").removeClass('small');
        $(".svg--logo").addClass('large');
    }
});

CSS

.large {
  background-image: url(../../../assets/images/illus/billie_logo_large.svg);
  background-repeat: no-repeat;
  margin-top: -60px;
  margin-left: -90px;
  padding-bottom:30px;
}
.small {
  background-image: url(../../../assets/images/illus/billie_logo_small.svg);
  background-repeat: no-repeat;
}
}
}

Collectives™ on Stack Overflow

Changing svg by using setting attribute returns error

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related