Html SVG标签实现动态效果

效果图来自高德API官网

svg标签实际就是将多个图片进行拼接，然后其中某个元素运动

//viewBox="0 0 1920 480" 画布大小 此单位不是PX 他是根据svg大小分隔成1920份*480 份
<svg id="svg1" viewBox="0 0 1920 480" version="1.1" xmlns="http://www.w3.org/2000/svg"
 p-id="2540"style="width: 100%;height: 100%;">
 //matrix(1,0,0,1,940,15) 最后两个数是 X，Y轴位置 左上角为0,0
	<g class="bg" transform="matrix(1,0,0,1,940,15)" opacity="1">
		<image width="698.5px" height="427.5px" preserveaspectratio="xMidYMid slice" 
			xlink:href="img/banner/bg.png"></image>
	</g>
	<g class="feiji" transform="matrix(1,0,0,1,1215,138)" opacity="1">
		<image width="283.5px" height="199.5px" preserveaspectratio="xMidYMid slice" 
		xlink:href="img/banner/1.png"></image>
	</g>
</svg>
<scrpit>
	// 				dom选择器   动画时间 y轴位置 重复  
	TweenMax.to('#svg1 .feiji', 2.5, {y:120,repeat:-1,yoyo:true});
</scrpit>

TweenMax 插件可实现动态 改变 X,Y轴位置和透明度 等等
点这里官网