SVG stroke color won't change

Question

I'm having trouble getting the stroke color on an SVG to change. Here I have an SVG from the Material Symbols library that displays in black:

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/>
</svg>

I have modified it by adding stroke="#ff0000" attribute to both the <svg> and <path> tag with no effect. I have also tried stroke="currentColor" and set the color attribute of the parent via CSS with no effect.

I have read the replies on various stackoverflow questions like this one, but none of the suggestions have worked for me yet.

I have no idea what I might be doing wrong.

Answer 1

The stroke attribute refers to the outline of the path element. You can see the effect your stroke="#ff0000" change has had by adding stroke-width="10". However, this is probably not what you intended.

Instead, if you add a fill="#ff0000" you will change the color of the path itself. This is most likely what you wanted.

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path fill="#ff0000" d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/>
</svg>

For more on the differences between fill and stroke see this documentation.