Почему преобразование текста не работает с текстом SVG в Firefox?

Question

Я начал экспериментировать с SVG, и я не уверен, что я что-то не так делаю, не поддерживается или это просто ошибка Firefox.

Это строка в SVG

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

Это стили

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

Это работает в Opera, Chrome, IE9 и Safari.Я также протестировал letter-spacing, и он работает на всех, кроме Firefox.

Справочная страница: SVG Experimenting

Answer 1

Вы не можете использовать CSS, но вы всегда можете использовать Javascript. Если вы хотите, чтобы все текстовые элементы svg были написаны заглавными буквами. В моем случае это были элементы tspan внутри текстовых элементов, так что это был мой (jquery) код:

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

Answer 2

Он работает не во всех браузерах, поскольку не является допустимым свойством SVG. В этом списке нет:

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

Были вопросы по этому поводу в Bugzilla, но вывод не состоял в том, чтобы добавить его в Firefox.

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

Answer 3

В SVG нет свойства text-transform: http://www.w3.org/TR/SVG/propidx.html Если оно работает в других браузерах, то это, вероятно, потому, что это только потому, что рендеринг текста html и SVG разделяет код. Я полагаю, что любой браузер может удалить эту функцию, поскольку ее нет в спецификации, хотя более вероятно, что она будет добавлена ​​в будущую версию спецификации SVG, а не удалена из существующих реализаций. Межбуквенный интервал просто еще не реализован в Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=371787