旋转SVG中的圆形中心文本

我想在旋转的SVG圆形中显示文本。我到现在为止的代码是这样的：旋转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视窗）失败。当我将text节点的x和y坐标更改为x="0" y="20"时，我可以看到圆上的文本，但不会旋转。

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

任何想法？

来源

2016-01-28 migg

使用变换属性而不是变换风格 –

试过了，不会在Safari工作，很遗憾。 – migg

... @home我可以证实，这也适用于Mac和Brave的Safari浏览器。适用于Windows的Safari并不真正相关，但IE是-.- – migg

就我个人而言，我会按照罗伯茨评论，而不是使用风格。风格转换和SVG将进入一个恼人的世界:)。

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

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

您还可以使用文本锚点和对齐基线将它放在中间。

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

plunkr

来源

2016-01-28 18:12:41 Ian

酷，近乎成功！ 'alignment-baseline'在IE中没有效果，所以我最终得到的是 75％'。这适用于跨浏览器，也许你想为其他人更新你的答案？ – migg

旋转SVG中的圆形中心文本

回答

相关问题