两个涉及缩放和平移的动画的 SVG 同步

Question

我无法同步涉及缩放和翻译的 SVG 转换。三角形的顶点从点 (967, 491) 平移到 (900, 100)，同时 png 图像也应随顶点平移，但也应在移动时按比例缩小或放大。

为了得到 png 图像的原始位置，我正确使用了公式 -centerX*(scale factor - 1), -centerY*(scaleFactor - 1)。这是动画之前的原始位置。但是随着运动的开始，我无法计算它的最终位置。

谁能帮我解决这个问题。

<svg viewBox="0 0 1200 800">
	<defs>
		<g id="triangle">
			<desc>Triangle</desc>
			<polygon id="triangle_" points="967,491 738,449 724,603">
				<animate attributeName="points" attributeType="XML"
				begin="0s" dur="5s" from="967,491 738,449 724,603" to="900,100 738,449 724,603" fill="freeze" />
			</polygon>
			<g transform="translate(483,245)">
				<image xlink:href="http://www.alegralabs.com/human.png" x="940" y="442" width="53" height="98" transform="scale(0.5)" style="fill:#FFF">
					<animateTransform attributeName="transform" type="scale" attributeType="XML"
					begin="0s" dur="5s" from="0.5" to="0.2" fill="freeze" />
				</image>
				<animateTransform attributeName="transform" type="translate" attributeType="XML"
					begin="0s" dur="5s" to="773,80" fill="freeze" />
					<!--<animateMotion from="0,0" to="241,122" dur="5s" fill="freeze" /> -->
			</g>
			<g>
				<text x="940" y="442">1234</text>
				<animateMotion from="0,0" to="-67,-391" dur="5s" fill="freeze" />
			<g>
		</g>
		
	</defs>
	<use xlink:href="#triangle" />
</svg>

Answer 1

首先，让您自己的生活更轻松，并给图像一个 x/y 位置，使其中心位于 0，即。 e. x="-26.5" y="-48"。那么scale 不会导致图像定位发生任何变化。将<text> 也移动到<g> 元素内，使图像和文本的相对位置保持不变。

将该组的坐标原点视为移动的单个点，它可以与三角形的移动顶点相同：transform="translate(967,491)"。

之后，一个动画可以缩放图像，另一个将<g> 元素移动到动画位置。您可以使用与移动顶点相同的坐标。

<svg viewBox="0 0 1200 800">
	<defs>
		<g id="triangle">
			<desc>Triangle</desc>
			<polygon id="triangle_" points="967,491 738,449 724,603">
				<animate attributeName="points" attributeType="XML"
				begin="0s" dur="5s" from="967,491 738,449 724,603" to="900,100 738,449 724,603" fill="freeze" />
			</polygon>
			<g transform="translate(967,491)">
				<animateTransform attributeName="transform" type="translate" attributeType="XML"
					begin="0s" dur="5s" from="967,491" to="900,100" fill="freeze" />
				<image xlink:href="http://www.alegralabs.com/human.png" x="-26.5" y="-48" width="53" height="98" transform="scale(0.5)" style="fill:#FFF">
					<animateTransform attributeName="transform" type="scale" attributeType="XML"
					begin="0s" dur="5s" from="0.5" to="0.2" fill="freeze" />
				</image>
				<text x="-27" y="-49">1234</text>
			<g>
		</g>
		
	</defs>
	<use xlink:href="#triangle" />
</svg>