代码之家 › 专栏 › 技术社区 › Maciek

SVG围绕中心点设置(旋转)所有图形的动画

rotation svg animation css

Maciek · 技术社区 · 5 年前

我有一个简单的图形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图形?

0 回复 | 直到 5 年前

Robby Cornelissen 5 年前

你可以用 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>