html - 居中 SVG 元素 Chrome 与 Safari

Question

我正在尝试将 SVG 元素置于父元素的中心。但是，我发现 Chrome 和 Safari 之间存在差异。以下代码在 Chrome 上将文本很好地居中在正方形内，但在 Safari 上则不然:

<svg width="200px" height="200px">
  <g transform="translate(70,70)">
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
    <g>
      <text text-anchor="middle" dominant-baseline="middle" style="fill: white" transform="scale(2)">
        <tspan>test</tspan>
      </text>
    </g>
  </g>

</svg>

结果:

我用这个测试用例创建了一个 jsFiddle:

https://jsfiddle.net/yq11jot0/

如何使正方形内的文本垂直居中？

Answer 1

只使用 dy 而不是 dominant-baseline 怎么样？

<svg width="200px" height="200px">
  <g transform="translate(70,70)">
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
    <g>
      <text text-anchor="middle" dy="0.25em" style="fill: white" transform="scale(2)">
        <tspan>test</tspan>
      </text>
    </g>
  </g>

</svg>