Sometimes, we want to apply a color to an SVG text element with CSS.
In this article, we’ll look at how to apply a color to an SVG text element with CSS.
How to apply a color to an SVG text element with CSS?
To apply a color to an SVG text element with CSS, we add a class to the text element.
For instance, we write
<style type="text/css">
.mainsvg {
height: 320px;
border: 1px solid red;
width: 400px;
}
.caption {
fill: yellow;
}
</style>
<h2>SVG - Sandbox</h2>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
<text x="65" y="40" class="caption">Fact</text>
</svg>
</div>
to add a svg with a text element inside.
We add the caption class to it.
And then we set the caption class to have the fill: yellow; to make the text yellow.
Conclusion
To apply a color to an SVG text element with CSS, we add a class to the text element.
