SVG анимирует (вращает) всю графику вокруг центральной точки - PullRequest
Новая
       22

SVG анимирует (вращает) всю графику вокруг центральной точки

0 голосов
/ 26 февраля 2019

У меня есть простой графический SVG

enter image description here

Я бы хотел, чтобы он вращался вокруг центральной точки.Это не должно быть плавным, просто поворот на 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-графики вокруг центральной точки?

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете просто использовать 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>
...