html - 为什么在 Firefox 中文本转换对 SVG 文本不起作用?

标签 html css svg

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

最佳答案

你不能使用css,但你总是可以使用javascript。如果您希望所有 svg 文本元素都大写。在我的例子中,它在文本元素中有 tspan 元素,所以这是我的 (jquery) 代码:

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

关于html - 为什么在 Firefox 中文本转换对 SVG 文本不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8825098/

相关文章:

html - 更改导航栏中所选元素的字体颜色

html - 不同浏览器中奇怪的内联 SVG 故障

html - 加载主页内容时左侧导航菜单消失,为什么?

javascript - 指针事件 : none VML raphael solution

javascript - 拉斐尔 JS 派 : rotate the slice

javascript - IE6及以上版本如何制作 “Stay-On-Top”菜单?

html - 哪个更适合标记属性/值对 : <strong> or font-weight:bold? 中的属性

css - * 在 CSS 中有什么作用?

html - block 位置、文本位置和链接下划线

linux - 当从 CentOS 6.5 中的 Tomcat 7 提供服务时,内联 SVG 无法在 IE9+ 中呈现