How to apply a color to a SVG Text element

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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>

Attributions