Question

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

Answer 1

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

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

SVG - 将文本节点置于圆圈中心，导致Internet Explorer出现问题

1 个答案: