How to apply a color to a SVG Text element

html css text svg

Okay... I'm going nuts over here. I've started experimenting with SVG. Working with SVG and applying CSS classes to it works like a charm. I just cant figure out what i'm doing wrong, but i just cant get the class to work on a svg text element. I've stripped it all the way down and this is what i got:

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <style type="text/css">
        .mainsvg {
            height: 320px;
            border: 1px solid red;
            width: 400px;
        }
        .caption {
            color: 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>
</body>
</html>

According to http://www.w3.org/TR/SVG/styling.html#ClassAttribute this should work...

Any hints/tips on what to change, or an alternative?

If I read the w3 link you're not able to set border. it's called stroke.

Well, the border works just fine. Stroke is used for everything you actually "draw". But my question is about the class on the text element, where I set the color of the text just like in the w3 link.

Robert Longson

Setting the class is correct but the CSS color property has no effect on SVG. SVG uses fill and stroke properties. In your case you probably just need to change color to fill. This displays yellow text for me in Firefox.

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <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>
</body>
</html>

Tried it and nope... And remember. Color is what they give as an example at W3 Recommendation. I stripped it down to color to get the easiest possible implementation to test with.

Well done you've found a bug in the SVG specification. I've reported it to w3c: lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html

Well, no. I agree that there is a bug. But it's not in the documentation. They basicly state what it is supposed to be. It just seems that all browsers failed to implement this. Which strikes me as very unlikely. And remember, it doesn't work with fill or stroke either. It seems the css class selector is completely ignored (chrome, FF and IE10).

Wait.... text.caption does work. text .caption (with space) does not.... (this is tested with fill in all 3 browsers) .caption works aswell. I wonder what I tested the first time you suggested fill and it did not work.....

Setting just the color property has no directly visible effect in svg, but you can use that color for the fill, stroke or even both, e.g text { fill: currentColor }.

Joshua Dance

This is the top Google result for coloring SVG text and to make it very clear for rookies like me, to color an SVG text element in 2022, use stroke, and fill.

fill="red"
stroke="#0000FF"

Just like you use stroke for the outline color and fill for the inside color of a shape, you can do the same thing for text in SVGs.

Click run code snippet to see an example right in this answer.

How to apply a color to a SVG Text element

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US