SVG - 将文本节点居中在一个圆圈上，导致 Internet Explorer 出现问题答案

【问题标题】：SVG - centering a text node over a circle causing issues in Internet ExplorerSVG - 将文本节点居中在一个圆圈上，导致 Internet Explorer 出现问题
【发布时间】：2013-07-09 20:43:05
【问题描述】：

我正在尝试使用 SVG 将文本节点置于圆形节点的中心。这是示例代码；

    <svg width="200" height="200" style="display:block">
    <g>
        <circle id="number"
                    cx="22"
                    cy="22"
                    r="20"
                    fill="#ffcc66"
                    fill-opacity="1"
                    stroke="#ff9933"
                    stroke-opacity="1"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round">
            </circle>

            <text id="number"
                  x="22"
                  y="22"
                  fill="#333333"
                  font-family="sans-serif"
                  font-size="22px"
                  font-weight="bold"
                  dominant-baseline="middle"
                  alignment-baseline="central"
                  pointer-events="auto"
                  text-anchor="middle">
               7       
        </text>
    </g>
</svg>

目标是将文本节点定位在圆的中心（水平和垂直）。示例见http://jsfiddle.net/YpfcJ/。

在 Chrome、Firefox、Safari 和 Opera 中看起来不错，但 IE9+ 似乎忽略了定位。有人知道这个的解决方案/原因吗？

【问题讨论】：

标签： internet-explorer svg internet-explorer-9

【解决方案1】：

正如您所发现的，IE 中的 SVG 支持是不完整的，并且与其他实现相比存在更多错误。

我的建议是不要依赖alignment-baseline，而只需调整<text> 元素的y 坐标。值 30 似乎有效。

【讨论】：