This post was originally written for the Echobind blog.
currentColor property provides the current text color of the selected element. The CSS cascade makes it so the child’s text color matches the parents, but the
currentColor property can be used for any other color property as well, like background or border colors.
border-color: currentColor; /* Also red */
This also includes properties on SVG elements on the page. Using
currentColor as the
stroke color on a shape or path will have that element take on the text color of its parent. It even works with a CSS animation.
It’s important to remember that this only works if the SVG is rendered directly on the page - it won’t work if the SVG is loaded with an