SVG围绕中心点动画（旋转）所有图形

Question

我有一个简单的图形SVG

我希望它绕中心点旋转。它不必很平滑，只需旋转90秒钟然后每秒返回一次。

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

是否存在可以围绕中心点旋转这些SVG图形的动画？

Answer 1

您可以只使用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>