Jump to content


target class inside svg sprite sheet inside loop.

Recommended Posts

Been trying to target a class inside a SVG spite sheet for a couple of hours now.  I can get as deep as USE.  I am at a loss as how to get deeper then the first child. 


It can get to work outside a loop easily, still getting my head around how to use them.  Hope I have not reached my question quota :)



See the Pen 4267d0bed43a1688664232847971ac2c by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

I'm not really sure if you can even get inside SVGs used as symbols like that.

Inspecting the DOM I found this nefarious shadow-root thing that gets created:



Might want to start poking around google for some more info.

There are some suggestions here that might prove useful: https://stackoverflow.com/questions/29629492/how-to-query-elements-within-shadow-dom-from-outside-in-dart

  • Like 4
Link to comment
Share on other sites

I would only recommend using SVG sprite sheets if you enjoy spending hours trying to figure how to access your SVG and poor performance.


Seriously. Go look at the icons used on any major site. If they're using SVGs, it will most likely be inlined.


And a loop was never your problem. The reason you see an animation in your second demo is because you're searching the entire document for elements with a .green-sock class.

var sock = document.querySelectorAll(".green-sock");


You see 2 animations, but there's only 1 element being animated, and it's not even visible. It's the path in your symbol. Changing the symbol is causing the SVGs inside the buttons to be redrawn.


See how animating the symbol here is causing all 4 buttons to change. 


So you had the right idea about trying to select the path inside your button like this. Technically, the path is in there, but you can't access it because it's inside a DOM that is not exposed.

var sock = parent.querySelectorAll(".green-sock");


There's a lot overhead involved with tracking and updating changes to clones using the <use> element, which can lead to poor performance. If you want to clone something, create an actual clone using the cloneNode method.




  • Like 4
Link to comment
Share on other sites

Thanks for all the details, Blake!

Link to comment
Share on other sites



Thanks, pal you are gentleman and scholar. My finest teacher of the web.


Bummer about SVG sprite sheets. It seemed like a good idea to serve only one file.  I guess with GZIP there isn't much to be gained. Need to find a solution for cleaner HTML now that am going to start to inline everything. 





  • Like 1
Link to comment
Share on other sites

There are several different ways to load all your SVGs on a single file, but the best option might be to have a build tool inline the SVGs for you. 


You said you were using Gulp, right? I wrote about that in this post. I haven't used it in it a while, so there might be other plugins for doing that, but it certainly got the job done.



  • Like 2
Link to comment
Share on other sites

Yup, still using gulp for now.  


Using comments for anything rather than a comment or commenting out doesn't seem right. You assumed correctly, there are other plugins out there. Found this guy https://github.com/viktorlarsson/gulp-inject-svg.  

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.