EN
CSS - set SVG color to current text color
0 points
In this article, we would like to show you how to set SVG color to the current text color using CSS.
Quick solution:
xxxxxxxxxx1
<style>2
.container {3
color: green;4
}5
</style>6
<div class="container">7
<svg>8
<path fill="currentColor"> <!-- currentColor uses .container color value -->9
<!-- SVG body here -->10
</path>11
</svg>12
</div>
In this example, we set the text color of the body element to green. We also set path element's attribute fill="currentColor" that allows us to use the body element's color property value.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
color: green; /* thanks to currentColor the fill attribute from svg <path> tag uses this color */8
}9
10
</style>11
</head>12
<body>13
<p>Example text...</p>14
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height:100px;">15
<path fill="currentColor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>16
</svg>17
</body>18
</html>