.search-bar svg {
width: 25px;
height: 25px;
color: red;
}
.search-button svg {
width: 25px;
height: 25px;
color: red;
}
<div class="search-bar">
<form>
<a class="search-button" type="submit">
<svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</svg>
</a>
</form>
</div>
Can anyone tell me how to control the color of svg using CSS? I've tried doing this with different classes and IDs, but none of them seem to have an effect on the color. I am able to change the size and position but not the color. I'd like to be able to use a separate ID or class to do this, rather than changing the color of the circle and line separately.
<div class="search-bar">
<form>
<a class="search-button" type="submit">
<svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</svg>
</a>
</form>
</div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Assign shared properties (such as line and circle strokes) a value of
currentColor, which you can then pass to the svg'scolorproperty (or any ancestor or inherited property) Control it:.search-button svg { width: 25px; height: 25px; color: red; } .search-button svg line,.search-button svg circle{ stroke: currentColor; }<div class="search-bar"> <form> <a class="search-button" type="submit"> <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"/> <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/> <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/> </svg> </a> </form> </div>(This is what Font Awesome and other libraries do behind the scenes. If you give
heightandwidthvalues inemunits, you can also Control it through subsequentfont-size, which is also inherited)