How to apply a color to an SVG text element with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *