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>

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

Answer 1

为了防止星星在scale ()转换过程中移动，我应用了CSS规则