SVG元素原位旋转问题：如何让图形固定位置旋转306度

问题原因 #

1. 旋转中心错误：你在<animateTransform>中设置的旋转中心是全局坐标的150 150，而非图形自身的中心，导致图形绕外部点做圆周运动超出画布。
2. 动画角度不符合需求：原动画设置旋转到360度，与你需要的306度不符。
3. 小语法错误：文本填充色fill="#00000"缺少一位，应为fill="#000000"。

修正后的代码 #

<svg width="500" height="500">
          
            <defs>
              <g id="stopSign">
                <ellipse cx="0" cy="0" rx="50" ry="50" 
                  stroke="#000000" stroke-width="2" fill="#FFC0CB"> 
                </ellipse>
                <ellipse cx="0" cy="55" rx="5" ry="5" 
                  fill="#FF0000"> 
                </ellipse>
                <ellipse cx="0" cy="-55" rx="5" ry="5" 
                  fill="#0000FF"> 
                </ellipse>
                <text x=-30 y=5 font-family="san-serif" 
                  font-size="24px" fill="#000000">
                  Suresh
                </text>
              </g>
            </defs>
          
            <line x1="0" y1="250" x2="500" y2="250" stroke="#000000"></line>
            <line x1="250" y1="0" x2="250" y2="500" stroke="#000000"></line>
                    
            <g transform="translate(300, 200)">
              <use xlink:href="#stopSign">
                <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 0 0" to="306 0 0" repeatCount="indefinite" degrees="0"></animateTransform>
              </use>
            </g> 
            <g transform="translate(300, 300)">
              <use xlink:href="#stopSign">
                <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 0 0" to="306 0 0" repeatCount="indefinite" degrees="0"></animateTransform>
              </use>
            </g> 
            <g transform="translate(200, 200)">
              <use xlink:href="#stopSign">
                <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 0 0" to="306 0 0" repeatCount="indefinite" degrees="0"></animateTransform>
              </use>
            </g> 
            <g transform="translate(200, 300)">
              <use xlink:href="#stopSign">
                <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 0 0" to="306 0 0" repeatCount="indefinite" degrees="0"></animateTransform>
              </use>
            </g> 
          
          </svg>

关键修改点 #

• 将每个<animateTransform>的from="0 150 150"改为from="0 0 0"，to="360 150 150"改为to="306 0 0"，让图形绕自身中心(0,0)旋转306度，保持位置固定。
• 修正文本填充色的语法错误，确保颜色显示正常。

内容的提问来源于stack exchange，提问作者GPT Gabriel Patrick Thomas