SVG 动画：在单个 .svg 文件中从各自的原点缩放多个图形

Question

我想要一个装载机，上面有三个脉动和衰落的星星。我已经用 CSS 创建了这个加载器，但这种技术不适合这种情况。我想要一个 loader.svg 文件。

这是CSS版本的笔：

https://codepen.io/Joan_Na/pen/wvawzEb 这就是它应该的样子。

这是我对单个 SVG 文件的处理方法：

https://codepen.io/Joan_Na/pen/gOpYwNy 我无法让星星从各自的起源开始缩放。单独启动每个星星的动画也很好，就像上面的 CSS 示例一样。

这里是 SVG 文件代码：

<div class="container">
<svg width="90px" height="30px" viewBox="0 0 90 30" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="44.9437" y1="-0.0694" x2="45.0305" y2="19.8832">
 <stop  offset="0.155" style="stop-color:#FEFE7B"/>
 <stop  offset="0.2795" style="stop-color:#FEFC75"/>
 <stop  offset="0.4527" style="stop-color:#FEF663"/>
 <stop  offset="0.6546" style="stop-color:#FEED45"/>
 <stop  offset="0.8763" style="stop-color:#FDE01C"/>
 <stop  offset="1" style="stop-color:#FDD802"/>
</linearGradient>
 <polygon id="star1" fill="url(#SVGID_1_)" points="45,6 47.93,11.92 54.47,12.87 49.73,17.49 50.85,24 45,20.93 39.15,24 40.27,17.49 
  35.53,12.87 42.07,11.92" transform="translate(-30 0)"/>
  <animateTransform
   attributeName="transform" 
   attributeType="XML" 
   type="scale"
   dur="1s" 
   values="1;0;1"
   repeatCount="indefinite" 
   begin="0s"  
   calcMode="linear"/>
  <animate
   attributeName="opacity"
   values="1;0;1" 
   dur="1s"
   repeatCount="indefinite" 
   begin="0s" 
   calcMode="linear"/>
<polygon id="star2" fill="url(#SVGID_1_)" points="45,6 47.93,11.92 54.47,12.87 49.73,17.49 50.85,24 45,20.93 39.15,24 40.27,17.49 
 35.53,12.87 42.07,11.92 " transform="translate(0 0)"/>
 <animateTransform
   attributeName="transform" 
   attributeType="XML" 
   type="scale"
   dur="1s" 
   values="1;0;1"
   repeatCount="indefinite" 
   begin="0s"  
   calcMode="linear"/>
  <animate
   attributeName="opacity"
   values="1;0;1" 
   dur="1s"
   repeatCount="indefinite" 
   begin="0s" 
   calcMode="linear"/>
<polygon id="star3" fill="url(#SVGID_1_)" points="45,6 47.93,11.92 54.47,12.87 49.73,17.49 50.85,24 45,20.93 39.15,24 40.27,17.49 
 35.53,12.87 42.07,11.92 " transform="translate(30 0)"/>
 <animateTransform
   attributeName="transform" 
   attributeType="XML" 
   type="scale"
   dur="1s" 
   values="1;0;1"
   repeatCount="indefinite" 
   begin="0s"  
   calcMode="linear"/>
  <animate
   attributeName="opacity"
   values="1;0;1" 
   dur="1s"
   repeatCount="indefinite" 
   begin="0s"
   calcMode="linear" />

</svg>
</div>

Answer 1

为了防止星星在 scale () 变换期间移动，我应用了 CSS 规则

#star1, #star2, #star3  {
transform-origin: center;
transform-box:fill-box;
}

由于此 CSS 规则不能与 SVG 转换命令一起使用 transform =" translate ()" 我不得不为每个星星使用我自己的单独 path。

.container {
background:#000;
width:30vw;
height:15vh;
padding-left:30px;
}

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="90" height="30" viewBox="0 0 90 30" version="1.1">

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="44.9437" y1="-0.0694" x2="45.0305" y2="19.8832">
 <stop  offset="0.155" style="stop-color:#FEFE7B"/>
 <stop  offset="0.2795" style="stop-color:#FEFC75"/>
 <stop  offset="0.4527" style="stop-color:#FEF663"/>
 <stop  offset="0.6546" style="stop-color:#FEED45"/>
 <stop  offset="0.8763" style="stop-color:#FDE01C"/>
 <stop  offset="1" style="stop-color:#FDD802"/>
</linearGradient> 
 <path id="star1" fill="url(#SVGID_1_)" d="m 20.9062,24.304922 -5.85,-3.07 -5.85,3.07 1.12,-6.51 -4.74,-4.62 6.54,-0.95 2.93,-5.9200004 2.93,5.9200004 6.54,0.95 -4.74,4.62 z" style="transform-origin: center; transform-box:fill-box;" >
      <animateTransform id="an_T1"
   attributeName="transform" 
   attributeType="XML" 
   type="scale"
   dur="1s" 
   values="1;0;1"
   repeatCount="indefinite" 
   begin="0s"
      keyTimes="0;0.75;1"
      />
  <animate id="an_Op1"
   attributeName="opacity"
   values="1;0;1" 
   dur="1s"
   repeatCount="indefinite" 
   begin="0s"
      keyTimes="0;0.75;1"
      /> 
 </path>
 
 

 <path id="star2"  fill="url(#SVGID_1_)" d="M 54.47,12.87 49.73,17.49 50.85,24 45,20.93 39.15,24 40.27,17.49 35.53,12.87 42.07,11.92 45,6 l 2.93,5.92 z" style="transform-origin: center; transform-box:fill-box;" >
      <animateTransform id="an_T2"
   attributeName="transform" 
   attributeType="XML" 
   type="scale"
   dur="1s" 
   values="1;0;1"
   repeatCount="indefinite" 
   begin="0.2s"
      keyTimes="0;0.75;1"
      />
  <animate id="an_Op2"
   attributeName="opacity"
   values="1;0;1" 
   dur="1s"
   repeatCount="indefinite" 
   begin="0.2s"
      keyTimes="0;0.75;1"
      /> 
 </path> 



  <path id="star3" fill="url(#SVGID_1_)" d="m 79.700565,18.010534 1.12,6.51 -5.85,-3.07 -5.85,3.07 1.12,-6.51 -4.74,-4.62 6.54,-0.95 2.93,-5.9200003 2.93,5.9200003 6.54,0.95 z" style="transform-origin: center; transform-box:fill-box;" >
    <animateTransform id="an_T3"
   attributeName="transform" 
   attributeType="XML" 
   type="scale"
   dur="1s" 
   values="1;0;1"
   repeatCount="indefinite" 
   begin="0.4s"  
   keyTimes="0;0.75;1"/>
  <animate id="an_Op3"
   attributeName="opacity"
   values="1;0;1" 
   dur="1s"
   repeatCount="indefinite" 
   begin="0.4s"
   keyTimes="0;0.75;1"  
   /> 
 </path> 
  
</svg>
</div>

更新

根据评论中的备注，将styles里面的svg移动了

SVG 动画：在单个 .svg 文件中从各自的原点缩放多个图形

SVG animation: scale multiple figures from their respective origin in a single .svg file

animation

svg

loader

svg-animate