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

它不适用于所有浏览器，因为它不是有效的SVG属性。它没有出现在这个列表中：

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

在Bugzilla上有关于它的问题，但结论并不是将它添加到Firefox。

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

Answer 2

您不能使用css，但您可以随时使用javascript进行大写。如果您希望所有svg文本元素都大写。在我的例子中，它在文本元素中有tspan元素，所以这是我的（jquery）代码：

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

Answer 3

SVG中没有文本转换属性：http://www.w3.org/TR/SVG/propidx.html如果它在其他浏览器中有效，那么可能是因为它只是因为html文本和SVG文本呈现共享代码。任何浏览器都可能删除此功能，因为它不在规范中，尽管它更有可能被添加到SVG规范的未来版本而不是从现有实现中删除。但是，在Firefox中尚未实现字母间距：https://bugzilla.mozilla.org/show_bug.cgi?id=371787

为什么不在Firefox中对SVG文本进行文本转换？

3 个答案: