为什么文本转换不能在 Firefox 中处理 SVG 文本？答案

【问题标题】：Why won't text-transform work on SVG text in Firefox?为什么文本转换不能在 Firefox 中处理 SVG 文本？
【发布时间】：2012-07-14 03:54:59
【问题描述】：

我开始尝试使用 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

【问题讨论】：

标签： html css svg

【解决方案1】：

您不能使用 css，但您始终可以使用 javascript 大写。如果您希望所有 svg 文本元素都大写。就我而言，它在文本元素中有 tspan 元素，所以这是我的 (jquery) 代码：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

text-transform:uppercase 的解决方法？是的，当然了。但你确定要听这个吗？你不会喜欢的……
:) 不只是大写而且实际上不起作用，因为它改变了字母间距，然后又无法更正，因为字母间距也不是 SVG 中的属性。 :P 我确实为此做好了准备，但我的意思是 SVG 中“高级”文本格式的解决方法。将 HTML 文本放在 SVG 下方也不起作用，因为它的缩放比例不同。
其实 text-spacing 是一个属性，但它肯定也不起作用。
我不知道，抱歉，我不是 SVG 大师；几个月前才开始涉足它，并遇到了与您相同的障碍。例如，结果在不同的浏览器中看起来不一样。没有找到任何解决方案。

【解决方案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

【讨论】：