Question

我已经分离出仅在Microsoft浏览器（EDGE＆amp; IE）上移动SVG文本的情况

<svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none">
  <text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle">
    <tspan x="50%" dy="0">test</tspan>
  </text>
</svg>

有没有办法让文字像其他浏览器一样居中？

以下是jsfiddle

中的示例代码

Answer 1

删除</tspan>和</text>之间的空白可以解决问题

<svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none">
  <text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle">
    <tspan x="50%" dy="0">test</tspan></text>
</svg>

jsfiddle

SVG文本在Edge和IE上移动

1 个答案: