CODEWITHSUNDEEP
htmlcsssvg
Vian Esterhuizen
Vian Esterhuizen

Reputation: 3904

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

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

Upvotes: 6

Views: 10663

Answers (3)

Scorpius
Scorpius

Reputation: 1009

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);
})

Upvotes: 7

Robert Longson
Robert Longson

Reputation: 124049

There is no text-transform property in SVG: http://www.w3.org/TR/SVG/propidx.html If it works in other browsers then it's probably because it's just because the html text and SVG text rendering shares code. Any browser might remove this feature I guess since its not in the specification, although it's more likely that it will be added to a future version of the SVG specfication than removed from existing implementations. letter-spacing is just not yet implemented in Firefox though: https://bugzilla.mozilla.org/show_bug.cgi?id=371787

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46559

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

Upvotes: 5

Related Questions