![]() ![]() If we align the mask with the background copy, goto Object > Mask > Set and move the result onto the artwork, we have the same as if we had holes in the artwork:Īnd the artwork is freely editable (the background copy is locked to secure it) In the left we have a mask and a copy of the background. Here we have a gradient background and the artwork (=ART). The artwork is never masked, only pieces of the background are in front of it and the total effect is like your artwork had holes. Mask a copy of the background with inverted mask, keep it above the artwork.One way to keep the artwork freely editable (see NOTE1) without having a copy: Layer blending modes cannot make something transparent, they can only change color and brightness. Here that is with Sass keeping the URLs as variables:īackground SVG Hovers with Data URL variables by Chris Coyier ( CodePen.If you want the texture to make holes to your artwork, you must use it as a mask. This doesn’t change that much from above, but it does open up one interesting possibility: Using a variable for the internal fills. ![]() This way, the SVG is still in charge of essentially drawing the shape, but the color comes from the background-color (or image! or gradient!) behind it rather than the SVG itself.īackground SVG Hovers with Mask by Chris Coyier ( CodePen. But if you’re using it, you would probably have to use this filter technique to swap color on hover.īackground SVG Object Hovers by Chris Coyier ( CodePen. SVG also has object, which is kinda neat in that it had a built-in fallback back in the day - although browser support is so good these days, I honestly have never used it. Fortunately, Barrett Sonntag made a tool to calculate the filters for you! Turning black to red ends up a whacky combination like this: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%). Trying to finagle the right filters to get the color right is tricky stuff. I don’t blame you if you’d rather not swap sources, so another possibility is to get gnarly with filters.īackground SVG Hovers with Filters by Chris Coyier ( CodePen. One possibility, which I’d argue isn’t a particularly good one, is to have two versions of every icon, in the respective colors, and swap between them:īackground SVG Hovers by Chris Coyier ( CodePen. At this point, you’ve sort of given up on being able to change the fill. SVG can be set as a background image just like PNG, JPG, or whatever other graphics format. ![]() That covers most use cases anyway, but still, a limitation nonetheless. This means you’re pretty firmly in single-color territory.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |