代码之家 › 专栏 › 技术社区 › Tonald Drump

SVG动画分步旋转

svg-animate css-animations svg animation css

Tonald Drump · 技术社区 · 7 年前

分12步走 (参见片段)。

相反,我希望在SVG代码中应用动画(这样当加载为CSS背景图像时,微调器会旋转)。

我在 <svg>

<animateTransform
  attributeType="xml"
  attributeName="transform"
  type="rotate"
  from="0 12 12"
  to="360 12 12"
  dur="2s"
  repeatCount="indefinite"
  />

这将旋转微调器-但不是按步长旋转。我要补充什么?

谢谢!:)

svg {
    height: 24px;
    fill: black;
    animation: spinner 1s steps(12, end) infinite;
  }
  
@keyframes spinner {
    to { transform: rotate(360deg); }
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
  <path d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.918" transform="rotate(330,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.836" transform="rotate(300,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.755" transform="rotate(270,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.673" transform="rotate(240,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.591" transform="rotate(210,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.509" transform="rotate(180,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.427" transform="rotate(150,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.345" transform="rotate(120,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.264" transform="rotate(90,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.182" transform="rotate(60,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
	<path style="opacity:.1" transform="rotate(30,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
</svg>

1 回复 | 直到 7 年前

Paul LeBeau 6 年前

你需要使用 calcMode="discrete" tableValues 列出所有步骤值的属性。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
  <g>
    <path d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.918" transform="rotate(330,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.836" transform="rotate(300,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.755" transform="rotate(270,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.673" transform="rotate(240,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.591" transform="rotate(210,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.509" transform="rotate(180,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.427" transform="rotate(150,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.345" transform="rotate(120,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.264" transform="rotate(90,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.182" transform="rotate(60,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <path style="opacity:.1" transform="rotate(30,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
    <animateTransform attributeType="xml"
                      attributeName="transform"
                      type="rotate"
                      dur="1s"
                      repeatCount="indefinite"
                      calcMode="discrete"
                      values="0 12 12; 30 12 12; 60 12 12; 90 12 12; 120 12 12; 150 12 12; 180 12 12; 210 12 12; 240 12 12; 270 12 12; 300 12 12; 330 12 12"
  </g>
</svg>

但您也可以在SVG中包含CSS。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
  <style>
    svg {
      height: 24px;
      fill: black;
      animation: spinner 1s steps(12, end) infinite;
    }

    @keyframes spinner {
      to { transform: rotate(360deg); }
    }
  </style>
  <path d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.918" transform="rotate(330,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.836" transform="rotate(300,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.755" transform="rotate(270,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.673" transform="rotate(240,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.591" transform="rotate(210,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.509" transform="rotate(180,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.427" transform="rotate(150,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.345" transform="rotate(120,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.264" transform="rotate(90,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.182" transform="rotate(60,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
  <path style="opacity:.1" transform="rotate(30,12,12)" d="M12,2 a1,1 0 0 1 1,1 v3 a1,1 0 0 1 -1,1 a1,1 0 0 1 -1,-1 v-3 a1,1 0 0 1 1,-1 z"/>
</svg>