CODEWITHSUNDEEP
csssvg
Andy
Andy

Reputation: 5

SVG Animation rotates in wrong place

I'm quite new to SVG animations and I am struggleing a bit with it.

I have written the below code to rotate an image around a center point. However, it is cutting off the top and left of the immage.

 <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>

Any help with this would be hugely apreciated.

Thank you

Upvotes: 0

Views: 184

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

The viewBox attribute is missing. If you set it properly the inner translation is no longer necessary.

Also remove the nested SVG element

<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>

Upvotes: 1

Related Questions