Question

我试图在旋转的SVG圆圈中间显示文本。我到目前为止的代码是这样的：

<div style="font-size: 11px; font-weight: bold; display: inline-block; width: 38px; height: 38px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);">
    <svg viewBox="0 0 32 32">
        <circle fill="#C6C6C6" stroke="#005EB8" stroke-width="3px" r="14.5" cx="16" cy="16" stroke-dasharray="75 100"></circle>
        <circle fill="#FFF" r="13" cx="16" cy="16"></circle>
        <text style="transform: rotate(90deg); -webkit-transform: rotate(90deg);" fill="#000" x="5" y="-12">75%</text>
    </svg>
</div>

它在Chrome和Firefox中运行良好，但在IE 11和Safari（5.1 Windows）中失败。当我将text节点x和y坐标更改为x="0" y="20"时，我可以看到圆圈上的文字，但它没有旋转。

我想理解为什么浏览器在这方面表现如此不同，以及我可以做些什么来让IE和Safari像Chrome和FF一样旋转文本。

任何想法？

Answer 1

就我个人而言，我会遵循罗伯茨的评论而不是使用风格。风格转换和SVG将陷入烦恼的世界：）。

<text text-anchor="middle" alignment-baseline="middle" transform="rotate(90,16,16)" fill="#000" x="16" y="16">75%</text>

使用相同的中心点旋转，也可以旋转x，y。

你也可以使用text-anchor和alignment-baseline将它放在中间。

由于IE似乎不支持alignment-baseline =“middle”，您可以调整文本元素的“y”值以根据需要对齐，这对于跨浏览器支持可能更合适。

plunkr

旋转SVG中的圆心居中文本

1 个答案: