首页 > 解决方案 > SVG Chrome 渲染错误与组变换中的主导 Baseling

问题描述

下面圆圈中的第二个 X 在 Firefox 上垂直居中对齐,但在 Chrome 上却没有,这是一个错误吗?

第一个 X 在两者上都正确对齐。

<svg height="200">
  <circle cx="100" cy="100" r="100" fill="red"></circle>
  <text x="100" y="100" dominant-baseline="central"  text-anchor="middle" font-size="50">X</text>
</svg>
<svg width="340px" height="100px" viewBox="0 0 100 29.41"><g transform="translate(8.333333333333334 7.500000000000001) scale(15.000000000000002 15.000000000000002)"><circle cx="0" cy="0" r="0.5" fill="red"></circle><text x="0" y="0" dominant-baseline="central" text-anchor="middle" font-size="0.4">X</text></g></svg>

标签: svg

解决方案


推荐阅读