1

我正在尝试使用 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+ 似乎忽略了定位。有人知道解决方案/原因吗？

4

1 回答 1

0

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

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

于 2013-07-11T15:53:33.340 回答