旋轉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中的圓形中心文本

回答

相關問題