【问题标题】:Firefox support for alignment-baseline property?Firefox 支持对齐基线属性吗?
【发布时间】:2013-10-13 07:09:08
【问题描述】:

Firefox 是否支持alignment-baseline property?当我检查(使用 Firebug)已明确设置了 alignment-baseline 属性的 SVG 元素时,Firebug 根本没有列出此属性(IOW 将其视为噪声)。无论我给这个属性赋予什么值,显示文本的外观都不会改变,进一步表明FF完全忽略了这个属性。

(FF 对该属性的支持可能被破坏的另一个迹象是,上面引用的页面中为该属性的 CSS 文档提供的链接是 dead-as-a-doornail。)

假设 FF 不支持 alignment-baseline 属性,那么最接近复制 FF 的默认行为的该属性的值是多少?

编辑:例如,使用 Chrome 和 FF 查看此 jsFiddle;每行显示的文本都显示一个突出显示的单词,该单词由以下形式的代码生成:

<tspan style="alignment-baseline:alphabetic">alphabetic</tspan>

请注意,所有行在 FF 中看起来都一样,但在 Chrome 中却不一样。

该属性有几个可能的候选值来复制 FF 的默认行为(即autoalphabeticmathematicinherit);不幸的是,这个实验无法决定这个问题,我不清楚在大多数情况下哪些可能的选项会匹配 FF 的默认行为。

【问题讨论】:

    标签: css svg


    【解决方案1】:

    似乎alignment-baseline 仅用于&lt;text&gt; 的一部分,即元素tspantref 等。对于主要的&lt;text&gt; 元素,请使用dominant-baseline 属性。

    (这是@Tanel Eero 在上面作为评论写的。我在这里重新陈述,以便问题可以得到接受的答案)。

    【讨论】:

    • 这让我又省了几个小时在桌子上敲打头的时间。
    • 我也是,谢谢你们让我的一天再次变得美好 :)
    【解决方案2】:

    Mozilla 开发者网络网站声明该样式只能用于某些元素:

    以下元素可以使用alignment-baseline属性

    <tspan>
    <tref>
    <altglyph>
    <textpath>
    

    所以这似乎是您的主要问题,因为我知道您正在尝试将其应用于 SVG。

    【讨论】:

    • 谢谢;请参阅我在最新编辑中提到的 jsFiddle
    • 我明白你的意思。我猜开发者网络页面底部的 css 页面链接不言自明。 developer.mozilla.org/en-US/docs/Web/CSS/alignment-baseline
    • 其实我刚刚找到了这个 - developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… 似乎对你有用,但我不确定它是否符合你的要求。
    • 我想这里的一个主要混淆来源是(现在,也可能是大约 4 年前)示例部分和实时示例在同一个MDN doc page 上,将alignment-baseline 属性应用于&lt;text&gt; 元素,即使在下一段中明确说明这是不可能的。尽管如此,它似乎仍然可以在 Chrome 中运行,并且混乱已经完成。
    • @O.R.Mapper 当您将 tspan 放入其中并为其赋予属性时,MDN 上的 codepen 在 Firefox 中也不起作用。非常混乱。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-21
    • 2011-04-21
    • 1970-01-01
    • 2011-09-19
    • 2016-04-05
    • 1970-01-01
    相关资源
    最近更新 更多