CODEWITHSUNDEEP
htmlcsssvg
Yuki.kuroshita
Yuki.kuroshita

Reputation: 779

Rotating svg elements about their center

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-origin:center, and then apply a transform, it starts rotating about the center of the whole SVG image. Is there any way to set the transform origin such that the circles rotate about their own center?

Here is the original svg image (I cannot paste the original code here so this): SVG image

Here is a jsfiddle for this: https://jsfiddle.net/g9zfcdm3/3/

There are 4 circles in the image. Achieving this with any one cirlce would be good enough. What I actually want to achieve is to animate these circles so that they rotate indefinitely around their own center.

Upvotes: 10

Views: 9883

Answers (2)

Phat Tran
Phat Tran

Reputation: 3860

An example of animation directly in the SVG file without CSS

svg {
  height: 178px;
  width: 600px;
}
<?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-grp" 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,0C158.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.715C102.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.651c-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,472c-74.377,0-141.499-38.731-179.953-99.408
          l28.517,20.367c8.989,6.419,21.479,4.337,27.899-4.651c6.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.53c-1.003,11,7.102,20.73,18.101,21.733
          c11.014,1.001,20.731-7.112,21.733-18.102l2.65-29.069C87.527,
          464.806,165.571,512,256,512c97.281,0,183.012-55.522,225.57-138.854
          C486.594,363.309,482.692,351.262,472.855,346.238z"/>
      </g>
    </g>
  </g>
  <animateTransform xlink:href="#sharp-grp" 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/

Upvotes: 0

Felix Edelmann
Felix Edelmann

Reputation: 5152

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.

Upvotes: 26

Related Questions