svg旋转文本元素看起来很乱

Question

我希望我能解释这个权利...

我正在尝试使用此svg图像中包含的字体使外圆旋转360度。具有0度圆的圆看起来不错。

但是，如果我将外圆绕圆心旋转90度，字体就会转过来，看起来好像有些歪斜。我尝试使用变换旋转功能进行了很多实验，但我无法拉直字体。所以他们保持混乱...

这是我目前的代码：

echo "<style>           .rotatewheel {
          transform:rotate(". $rotate . "deg);
          transform-origin: 50% 50%; /* Chrome, Firefox behaves differently */

    }</style>";

 echo '<svg height="600" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">';
 echo " <circle cx='$cx' cy='$cy' r='$radius_outer' stroke='black' stroke-width='2' fill='rgba(124,240,10,0.5)' /></circle>";
 echo "     <line class='rotatewheel' x1='". $sx1[0] . "' y1='" . $sy1[0]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[1] . "' y1='" . $sy1[1]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[2] . "' y1='" . $sy1[2]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[3] . "' y1='" . $sy1[3]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[4] . "' y1='" . $sy1[4]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[5] . "' y1='" . $sy1[5]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[6] . "' y1='" . $sy1[6]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[7] . "' y1='" . $sy1[7]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[8] . "' y1='" . $sy1[8]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[9] . "' y1='" . $sy1[9]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[10] . "' y1='" . $sy1[10]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "     <line class='rotatewheel' x1='". $sx1[11] . "' y1='" . $sy1[11]. "' x2='400' y2='300' stroke-width='1' stroke='#000' />";  
 echo "   <g transform='rotate(".$rotate.",400,300)'>";                                                                                                                     
 echo "     <text class='icon-a' x='".$tx1[0] . "' y = '".$ty1[0]."'  fill='#000' style='font-size: 20px;'>a</text>";
 echo "     <text class='icon-a' x='".$tx1[1] . "' y = '".$ty1[1]."'  fill='#000' style='font-size: 20px;'>s</text>";
 echo "     <text class='icon-a' x='".$tx1[2] . "' y = '".$ty1[2]."'  fill='#000' style='font-size: 20px;'>d</text>";
 echo "     <text class='icon-a' x='".$tx1[3] . "' y = '".$ty1[3]."'  fill='#000' style='font-size: 20px;'>f</text>";
 echo "     <text class='icon-a' x='".$tx1[4] . "' y = '".$ty1[4]."'  fill='#000' style='font-size: 20px;'>g</text>";
 echo "     <text class='icon-a' x='".$tx1[5] . "' y = '".$ty1[5]."'  fill='#000' style='font-size: 20px;'>h</text>";
 echo "     <text class='icon-a' x='".$tx1[6] . "' y = '".$ty1[6]."'  fill='#000' style='font-size: 20px;'>j</text>";
 echo "     <text class='icon-a' x='".$tx1[7] . "' y = '".$ty1[7]."'  fill='#000' style='font-size: 20px;'>k</text>";
 echo "     <text class='icon-a' x='".$tx1[8] . "' y = '".$ty1[8]."'  fill='#000' style='font-size: 20px;'>l</text>";
 echo "     <text class='icon-a' x='".$tx1[9] . "' y = '".$ty1[9]."'  fill='#000' style='font-size: 20px;'>z</text>";
 echo "     <text class='icon-a' x='".$tx1[10] . "' y = '".$ty1[10]."'  fill='#000' style='font-size: 20px;'>x</text>";
 echo "     <text class='icon-a' x='".$tx1[11] . "' y = '".$ty1[11]."'  fill='#000' style='font-size: 20px;'>c</text>";
 echo "  </g>"; 
 echo " <circle  cx='$cx' cy='$cy' r='$radius' stroke='black' stroke-width='2' fill='#fff' /></circle>";
 echo "     <line x1='". $x1[1] . "' y1='" . $y1[1] . "' x2='400' y2='300' stroke-width='2' stroke='#000' />";
 echo "     <line x1='". $x1[2] . "' y1='" . $y1[2] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />";
 echo "     <line x1='". $x1[3] . "' y1='" . $y1[3] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />";
 echo "     <line x1='". $x1[4] . "' y1='" . $y1[4] . "' x2='400' y2='300' stroke-width='2' stroke='#000' />";
 echo "     <line x1='". $x1[5] . "' y1='" . $y1[5] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />";
 echo "     <line x1='". $x1[6] . "' y1='" . $y1[6] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />";
 echo "     <line x1='". $x1[7] . "' y1='" . $y1[7] . "' x2='400' y2='300' stroke-width='2' stroke='#000' />";
 echo "     <line x1='". $x1[8] . "' y1='" . $y1[8] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />";
 echo "     <line x1='". $x1[9] . "' y1='" . $y1[9] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />"; 
 echo "     <line x1='". $x1[10] . "' y1='" . $y1[10] . "' x2='400' y2='300' stroke-width='2' stroke='#000' />"; 
 echo "     <line x1='". $x1[11] . "' y1='" . $y1[11] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />"; 
 echo "     <line x1='". $x1[12] . "' y1='" . $y1[12] . "' x2='400' y2='300' stroke-width='1' stroke='#000' />"; 
 echo " <circle   cx='$cx' cy='$cy' r='$radius_inner' stroke='black' stroke-width='2' fill='#fff' /></circle>";
 echo "</svg>";