Trying to style SVG Sprite with CSS
I've created a sprite file with a logo in it that has 2 groups. I want to be able to style each group independently with CSS. (I've set it up this way so I can style the logo on the fly: solid, 2-color, etc). I have an ID on the SVG groups, and when I reference ONLY the ID in my CSS I'm able to change the color. As soon as I add additional selectors (eg: ".logo #group-name") it breaks and reverst to the default color. What am I doing wrong?
9 Replies
can you show your code
I have the class "group-1" on the <g> in the SVG. In the CSS when I reference only ".group-1" (the first line of CSS) it works perfectly; only the paths in that group are colored. But if I try to add any other combination of classes or ID's (2nd and 3rd line of CSS) it simply stops working.
I can't test your code from a screenshot, but my simulation of it works:
https://codepen.io/chooking/pen/YzMmbEo
Also, you did not share the HTML. It's possible that your selectors are wrong for the HTML that you have.
Thanks. I can see how that would work, but I'm calling this from a Srite. I'm thinking that's what caused the issue.
I'm π― sure that I have the right selectors. But I'll share it if you think it will help
What does that mean? Are you using a sprite sheet which has multiple images contained in a single image source? I don't see how that affects anything. You would just be displaying a portion of the image.
if you look at #How To Ask Good Questions there's instructions on how to use code blocks to share your code
I saw the code that you briefly shared and removed. It has <use>, which you did not show in your earlier screenshot. If you have <symbol> and <use>, The selectors have to apply to where the <symbol> part is located and not where the <use> is located in the HTML.
https://codepen.io/chooking/pen/KKYOLev
I updated this to have symbol/use. Notice that the CSS works only because the symbol part is inside of footer_logo, but you almost certainly want the use part in there and not the symbol.