Why won't text-transform work on SVG text in Firefox?

Question

I started experimenting with SVG and I'm not sure if this is something I'm doing wrong, it's not supported or it's just a Firefox bug.

This is the line in SVG

<text x="177" y="658">Web Interactive</text>

These are the styles

svg text{
position:relative;
font-size:7.3em;
font-family:'GothamBookRegular',Helvetica,Arial,sans-serif;
font-variant:normal;
font-style:normal;
text-transform:uppercase;
text-align:left;
fill:#282828;
color:#282828;
}

This works in Opera, Chrome, IE9 and Safari. I've also tested letter-spacing, and it works on all but Firefox too.

Reference page: SVG Experimenting

Answer 1

You can't use css, but you can always capitalize with javascript. If you want all svg text elements to be capitalized. In my case, it had tspan elements inside text elements, so this was my (jquery) code:

$('svg text tspan').each( function (){
    txt = $(this).text().toUpperCase();
    $(this).text(txt);
})

Answer 2

It doesn't work in all browsers because it is not a valid SVG property. It doesn't appear in this list:

http://www.w3.org/TR/SVG/propidx.html

There were questions about it on Bugzilla, but the conclusion was not to add it to Firefox.

https://bugzilla.mozilla.org/show_bug.cgi?id=682124