svg-sprite | SVG sprites & stacks galore — | Animation library

So I'm reviewing the code of a website my friend coded, and I wanted to know if there is a way that I can change all elements with a specific class name, to another using Tampermonkey.

Here's my code at the moment:

My for the ellipses below won't show in Chrome based browsers, but will show the other content. Whereas firefox will show both.

I read this page, and this page, and they gave clues that it was a radialGradient issue, but I'm not dealing with any external files like the first page has, nor trying a conical gradient like the other one.

I want to have my first tag strictly for only, so I can reference parts later on to cut down the file size, and keep it clean. And to get rid of blank space, I added style="display: none;" to this first tag.

Once I do the above, I add my other 's (email, SMS, etc) to reference them many times. Again, the first blank svg with the defs does not show (which is good), and the , ellipses, etc. will show fine in Firefox, but not Chrome.

The ellipses will only show in Chrome when I take off style="display: none;" from the first svg, even though they're in the same element.

When I noticed it might be a issue, I added fill:yellow;stroke:purple;stroke-width:2 to my ellipses style attribute, and that makes the ellipse show with that styling, so I know the ellipse is there, but the gradient won't show inside it.

Anyone know why the will not show up in Chrome based browsers while style="display: none;" is on the first svg??? Or does anyone have any work arounds to fix this / do this more efficiently??? I know I can put everything in 1 svg, but I need them all separate so I can style them with css more easily, since they're all icons.

Thanks!

See code snippet for bouncing circle in 24 sprite frames.

n:0 displays the sprite framenr

How can I get rid of the horizontal jitter movement, is it SVG or CSS?

The offset is less at less frames in sprite, and gets worse and worse at more frames per sprite

It is less obvious in Chromium, and more obvious in FireFox

I tried https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

I am the maintainer of external-svg-sprite-loader and I noticed that when using it with webpack 5 I get the following warning:

I'm trying to build svg sprites with webpack and svg-spritemap-webpack-plugin. While it's building nice sprites with regular svgs, it doesn't render svgs with gradients and I can't get why.

A piece of webpack config related to sprites generation:

Babel is giving me this error Cannot find module 'babel-plugin-svg-sprite-loader '

This is my babel file.

How to inject SVG sprite in storybook from node_modules?

Currently I am trying to 'import @package-name/src/svg-sprite.svg;', but I am not sure how to adjust 'webpackFinal' in storybook for it to work.

I would like my workflow to update styles without refreshing the browser. I see in the console that HMR is enabled. However, updating a scss file causes the browser to fully refresh. This is specially inconvenient in development when working on a view that loads data from an API.

I'm using webpack 4.42.0, webpack-dev-server 3.11.0. Full package.json:

I use gatsby-source-git to pull files from Github repository. It worked well, but I added some files into repository and I am not able to pull new files into my Gatsby project.

If I run this query in http://localhost:8000/___graphql: