相关疑难解决方法(0)

SVG中文本元素的垂直对齐方式

假设我有SVG文件:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>
Run Code Online (Sandbox Code Playgroud)

我想以某种方式对齐顶部ab.实际上,我希望我的定位是根据roofline而不是baseline!

w3c svg vertical-alignment

136
推荐指数
5
解决办法
9万
查看次数

Firefox支持对齐基线属性?

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

(FF对此属性的支持可能被破坏的另一个迹象是,上面引用的关于此属性的CSS文档的页面中给出的链接是死的 - 作为doornail.)

假设,如果看起来,FF不支持该alignment-baseline属性,这个属性最接近复制FF默认行为的值是多少?

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

<tspan style="alignment-baseline:alphabetic">alphabetic</tspan>
Run Code Online (Sandbox Code Playgroud)

请注意,所有行在FF中看起来都相同,但在Chrome中则不然.

有几个可能的候选值此属性复制FF的默认行为(即auto,alphabetic,mathematicinherit); 不幸的是,这个实验无法决定这个问题,而且我不清楚哪种可能的选项会在最大部分情况下与FF的默认行为相匹配.

css svg css3

23
推荐指数
2
解决办法
4273
查看次数

标签 统计

svg ×2

css ×1

css3 ×1

vertical-alignment ×1

w3c ×1