css - SVG 动画在错误的位置旋转

Question

我对 SVG 动画还很陌生，我有点吃力。

我编写了以下代码来围绕中心点旋转图像。但是，它会切断图像的顶部和左侧。

 <svg width="350" height="350">
      <g transform="translate(175, 175)">
        <svg>
        <g>
          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
    
          <circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
    
          <text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
    
          <circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
    
          <text x="0" y="-120" text-anchor="middle" dy="0">
            <tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
            <tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
          </text>
          </g>
        </svg>
      </g>
    </svg>

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

缺少 viewBox 属性。如果您正确设置它，则不再需要内部翻译。

同时移除嵌套的 SVG 元素

<svg width="350" height="350" viewBox="-140 -175 280 350" xmlns="http://www.w3.org/2000/svg">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>

      <circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
      <text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
      <circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>

      <text x="0" y="-120" text-anchor="middle" dy="0">
        <tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
        <tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
      </text>
</svg>