Для покраски SVG существует несколько способов:
- Использование атрибута fill внутри SVG-элемента:
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="red" />
</svg>
- Использование CSS-свойства fill для SVG-элемента:
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" style="fill: red;" />
</svg>
- Использование CSS-селектора для SVG-элемента:
svg rect {
fill: red;
}
- Использование внешнего файла CSS:
<svg width="100" height="100">
rect x="10" y="10" width="80" height="80" class="red" />
</svg>
<style>
.red {
fill: red;
}
</style>
Важно учитывать, что для покраски SVG-элементов необходимо использовать свойство fill, а не background-color.