CODEWITHSUNDEEP
cssanimationsvgrotation
Maciek
Maciek

Reputation: 1972

SVG animate (rotate) all graphics around a center point

I have a simple graphic SVG

enter image description here

I would like it to rotate around the center point. It doesn't have to be smooth, just a rotation 90 and back every second. 

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 27 27" style="enable-background:new 0 0 27 27;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<rect x="0" width="27" height="27"/>
<rect x="8" y="11" class="st0" width="1" height="5"/>
<rect x="9" y="10" class="st0" width="1" height="1"/>
<rect x="10" y="9" class="st0" width="1" height="1"/>
<rect x="11" y="8" class="st0" width="5" height="1"/>
<rect x="13" y="6" class="st0" width="1" height="1"/>
<rect x="14" y="7" class="st0" width="1" height="1"/>
<rect x="14" y="9" class="st0" width="1" height="1"/>
<rect x="13" y="10" class="st0" width="1" height="1"/>
<rect x="18" y="11" class="st0" width="1" height="5"/>
<rect x="17" y="16" class="st0" width="1" height="1"/>
<rect x="16" y="17" class="st0" width="1" height="1"/>
<rect x="11" y="18" class="st0" width="5" height="1"/>
<rect x="12" y="17" class="st0" width="1" height="1"/>
<rect x="13" y="16" class="st0" width="1" height="1"/>
<rect x="12" y="19" class="st0" width="1" height="1"/>
<rect x="13" y="20" class="st0" width="1" height="1"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Is there an animation where I can rotate these SVG graphics around the center point?

Upvotes: 0

Views: 66

Answers (1)

Robby Cornelissen
Robby Cornelissen

Reputation: 97120

You can just use animateTransform:

.st0 {
  fill: white;
}
<svg>
  <g>
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 14 14; 90 14 14; 0 14 14"
      dur="1s"
      repeatCount="indefinite" />
    <rect x="0" width="27" height="27"/>
    <rect x="8" y="11" class="st0" width="1" height="5"/>
    <rect x="9" y="10" class="st0" width="1" height="1"/>
    <rect x="10" y="9" class="st0" width="1" height="1"/>
    <rect x="11" y="8" class="st0" width="5" height="1"/>
    <rect x="13" y="6" class="st0" width="1" height="1"/>
    <rect x="14" y="7" class="st0" width="1" height="1"/>
    <rect x="14" y="9" class="st0" width="1" height="1"/>
    <rect x="13" y="10" class="st0" width="1" height="1"/>
    <rect x="18" y="11" class="st0" width="1" height="5"/>
    <rect x="17" y="16" class="st0" width="1" height="1"/>
    <rect x="16" y="17" class="st0" width="1" height="1"/>
    <rect x="11" y="18" class="st0" width="5" height="1"/>
    <rect x="12" y="17" class="st0" width="1" height="1"/>
    <rect x="13" y="16" class="st0" width="1" height="1"/>
    <rect x="12" y="19" class="st0" width="1" height="1"/>
    <rect x="13" y="20" class="st0" width="1" height="1"/>
  </g>
</svg>

Upvotes: 1

Related Questions