Rotating svg elements about their center

Question

I have an SVG image, in which there are individual circles that I want to rotate about their own center (the center of the circles). However when I set transform-origi

Answer 1

See this (resolved as invalid) bug report in Firefox about your problem: https://bugzilla.mozilla.org/show_bug.cgi?id=1209061

Normally, CSS transforms on SVG elements are relative to the viewport and not to the element itself. This can be changed by adding transform-box: fill-box:

svg .rotate {
  animation: rotate 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Working fiddle: https://jsfiddle.net/g9zfcdm3/10/

Background

From the MDN docs about transform-box:

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

border-box (default)

The border box is used as the reference box. The reference box of a is the border box of its table wrapper box, not its table box.

fill-box

The object bounding box is used as the reference box.

Note that it's an experimental feature and probably won't work in IE and Edge.

Answer 2

An example of animation directly in the SVG file without CSS

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
     <g id="sharp-group" transform="translate(50, 50) rotate(0) scale(0.8, 0.8)">
<g>
    <g>
        <path fill="#746DF7" d="M493.815,70.629c-11.001-1.003-20.73,7.102-21.733,18.102l-2.65,29.069C424.473,47.194,346.429,0,256,0
            C158.719,0,72.988,55.522,30.43,138.854c-5.024,9.837-1.122,21.884,8.715,26.908c9.839,5.024,21.884,1.123,26.908-8.715
            C102.07,86.523,174.397,40,256,40c74.377,0,141.499,38.731,179.953,99.408l-28.517-20.367c-8.989-6.419-21.48-4.337-27.899,4.651
            c-6.419,8.989-4.337,21.479,4.651,27.899l86.475,61.761c12.674,9.035,30.155,0.764,31.541-14.459l9.711-106.53
            C512.919,81.362,504.815,71.632,493.815,70.629z"/>
    </g>
</g>
<g>
    <g>
        <path fill="#746DF7" d="M472.855,346.238c-9.838-5.023-21.884-1.122-26.908,8.715C409.93,425.477,337.603,472,256,472
            c-74.377,0-141.499-38.731-179.953-99.408l28.517,20.367c8.989,6.419,21.479,4.337,27.899-4.651
            c6.419-8.989,4.337-21.479-4.651-27.899l-86.475-61.761c-12.519-8.944-30.141-0.921-31.541,14.459l-9.711,106.53
            c-1.003,11,7.102,20.73,18.101,21.733c11.014,1.001,20.731-7.112,21.733-18.102l2.65-29.069C87.527,464.806,165.571,512,256,512
            c97.281,0,183.012-55.522,225.57-138.854C486.594,363.309,482.692,351.262,472.855,346.238z"/>
    </g>
</g>
 
</g>
           <animateTransform xlink:href="#sharp-group" attributeType="xml" attributeName="transform" type="rotate" from="0 256 256" to="360 256 256" dur="2s" additive="sum" repeatCount="indefinite" />
</svg>

You can change the animation config at

 <animateTransform xlink:href="#sharp-group" attributeType="xml" attributeName="transform" type="rotate" from="0 256 256" to="360 256 256" dur="2s" additive="sum" repeatCount="indefinite" />

For references: https://css-tricks.com/guide-svg-animations-smil/