Question

我无法同步涉及缩放和翻译的SVG转换。三角形的顶点从点（967,491）转换为（900,100），同时png图像也应该与顶点一起平移，但也应该在移动时向下或向上缩放。

要获取png图像的原始位置，我已正确使用公式-centerX *（比例因子-1）， - centerY *（scaleFactor - 1）。这是动画前的原始位置。但随着动议的开始，我无法计算它的最终位置。

任何人都可以帮我解决这个问题。

＆＃13;

<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>

＆＃13;

Answer 1

首先，让自己的生活更轻松，并为图像提供x / y位置，使其中心位于0，i。即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>

两个动画的SVG同步涉及缩放和同时翻译

1 个答案: