FirefoxでSVGテキストのテキスト変換が機能しないのはなぜですか？

Question

私はSVGを試し始めましたが、これが私が間違っているかどうかは分かりません。サポートされていないか、Firefoxのバグです。

このSVG

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

内の行は、これらは、これは、オペラ、クローム、IE9とSafariで動作

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

スタイルですされています。私もletter-spacingをテストしましたが、それはFirefox以外のすべてでも機能します。

参照ページ：SVG Experimenting

Answer 1

それが有効なSVGのプロパティではありませんので、それはすべてのブラウザでは動作しません。それは、このリストには表示されません。

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

ありBugzillaの上のそれについての質問があったが、結論は、Firefoxに追加しませんでした。

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

Answer 2

SVGにはテキスト-transformプロパティがありません：http://www.w3.org/TR/SVG/propidx.htmlは、それが他のブラウザで動作する場合、それは単なるHTMLテキストやSVGテキストレンダリングの株式コードためだから、それはおそらくです。 SVG仕様の将来のバージョンに追加される可能性は高いですが、既存の実装から削除される可能性は高くなりますが、ブラウザは仕様にないのでこの機能を削除する可能性があります。文字間隔はまだFirefoxではまだ実装されていません：https://bugzilla.mozilla.org/show_bug.cgi?id=371787

Answer 3

あなたはCSSを使用することはできませんが、いつでもjavascriptで大文字にすることができます。すべてのsvgテキスト要素を大文字にする必要がある場合。私の場合、テキスト要素の中にtspan要素がありましたので、これは私の（jquery）コードです：

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