考虑以下示例:
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 通过在中间垂直对齐文本来尊重 dominant-baseline: central
:
但是,Firefox 似乎并不尊重 dominant-baseline: central
:
您将如何解决这个跨浏览器问题?
最佳答案
在SVG 1.1 specification显性基线不是继承的属性。 SVG 2 改变了这样的东西 dominant-baseline is inherited . Firefox 仅在版本 70 中实现了该 SVG 2 功能。即在最初写这个问题之后。
同时简单地在文本元素上设置显性基线。
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>
关于html - 显性基线在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55797336/