主导基准在Firefox中不起作用 [英] dominant-baseline doesn't work in Firefox
本文介绍了主导基准在Firefox中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请考虑以下示例:
g {
transform: translate(50px, 50px);
dominant-baseline: central;
text-anchor: middle;
}
<svg width="100" height="100">
<g>
<circle cx="0" cy="0" r="15" stroke="#000" fill="#ffffff" />
<text x="0" y="0">A</text>
</g>
</svg>
Chrome致敬主要基线:中央
,将文本垂直居中对齐:
Chrome respects dominant-baseline: central
by aligning the text vertically in the middle:
但是,Firefox似乎并不尊重主要基线:中央
:
But, Firefox doesn't seem to respect dominant-baseline: central
:
您将如何解决此跨浏览器问题?
How would you fix this cross browser issue?
推荐答案
在 SVG 1.1规范优势基准不是继承的属性。 SVG 2进行了一些更改,使得主基线被继承。 Firefox仅在版本70中实现了SVG 2功能。
In the SVG 1.1 specification dominant-baseline is not an inherited property. SVG 2 changes things such that dominant-baseline is inherited. Firefox only implemented that SVG 2 feature in version 70. I.e. after this question was originally written.
同时,只需在文本元素上设置优势基线即可。
In the meantime simply set dominant-baseline on the text element.
g {
transform: translate(50px, 50px);
text-anchor: middle;
}
text {
dominant-baseline: middle;
}
<svg width="100" height="100">
<g>
<circle cx="0" cy="0" r="15" stroke="#000" fill="#ffffff" />
<text x="0" y="0">A</text>
</g>
</svg>
这篇关于主导基准在Firefox中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文