【发布时间】：2018-03-17 09:44:04
【问题描述】：
DEMO
抱歉演示代码有点长，但有问题的元素是<text ... class="pva-mb-nav__steps__number"
这给出了球上的数字 1,2,3,4。
它有属性dominant-baseline=central
当它具有y=20 属性时，数字在Chrome 上位于球的中间，但在IE11 上过高。 y=25的时候，IE11不错，Chrome太低了。
它的某些属性可以在 CSS 中设置，正如您所见，它是由 CSS 制成的。我认为如果它的位置可以通过 CSS 调整，那么让我应用 IE-only hack。我尝试将y=xx 或dy=xx 或transform:translate(xx) 放在CSS 中，但没有一个起作用。
问题：如何在 Chrome 和 IE11 上将数字放在小球中间？
SVG 需要对其容器进行 100% 缩放。
[编辑]刚发现IE11不支持dominant-baseline。这一定是原因。然后要中间对齐数字，我必须将数字和球顶部对齐，然后手动为文本计算一个好的dy值吗？
【问题讨论】：
-
尝试使用属性
dominant-baseline而不是alignment-baseline。这至少会修复 Firefox。 -
@ccprog 已更改，谢谢
-
dy="0.5em" 可能是一个不错的起点。
标签： internet-explorer svg