使用text-anchor将中心的SVG文本居中：中间和对齐 - 基线：中/中央

Question

我需要使用IE11将文本元素完美地置于SVG中心。

期望的结果（所有Evergreen浏览器）：

IE11结果：

// SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%" viewBox="0 0 130 130">
    <circle fill="dodgerblue" cx="50%" cy="50%" r="65"></circle>
    <text text-anchor="middle"
        alignment-baseline="central"
        font-size="75"
        font-family="Arial"
        x="50%" y="50%">1</text>
  </svg>

Codepen

Answer 1

IE不支持alignment-baseline。实现所需目标的最佳跨浏览器方式是使用dy属性并使用小数em值。

大约dy="0.35"的值适用于Arial。

<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%" viewBox="0 0 130 130">
  <circle fill="dodgerblue" cx="50%" cy="50%" r="65"></circle>
  <text text-anchor="middle"
        font-size="75"
        font-family="Arial"
        x="50%" y="50%" dy="0.35em">1</text>
</svg>

Answer 2

也同意@Paul LeBeau。另外，我使用此工具aggregator删除了空格。以下对我来说很有效：

<svg viewBox="0 0 130 130" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><circle fill="dodgerblue" cx="50%" cy="50%" r="65"/><text font-family="Arial" font-size="75" text-anchor="middle" x="50%" y="50%" dy="0.36em">1</text></svg>

我可以使用Javascript处理删除空白任务：

let svg = `
    <svg viewBox="0 0 130 130" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <circle fill="dodgerblue" cx="50%" cy="50%" r="65"/>
        <text font-family="Arial" font-size="75" text-anchor="middle" x="50%" y="50%" dy="0.36em">1</text>
    </svg>
`;

// Note: Hack for IE11
// Optimize HTML by removing whitespace
// Ref: https://jaketrent.com/post/remove-whitespace-html-javascript/
svg = svg.replace(/\n/g, '') // remove newline/carriage return
    .replace(/[\t ]+\</g, '<') // remove whitespace (space and tabs) before tags
    .replace(/\>[\t ]+\</g, '><') // remove whitespace between tags
    .replace(/\>[\t ]+$/g, '>'); // remove whitespace after tags