SVG实现动态加载轨迹沿轨迹路径运动的例⼦
最近做的项⽬中,需要⼀项⼈员的头像可以在地图上按轨迹运动,⾃⼰研究了下,做了个⽐较基础的:
⽬前有个⼩问题⼀直解决不了,就是svg⾥的img头像的圆⾓设置不了,我现在是把它放在⼀个circle⾥填充了,但是效果不好,还在研究更好的办法。。。。
先贴相关的代码⼋。
<svg width="100%" height="550px" id="svg" viewBox="0 0 730 530" preserveAspectRatio="xMinYMin meet">
<image
width="100%" height="460px" x="0" y="0" stroke="black"
xlink:href="img/dt2.png" preserveAspectRatio ="none">
</image>
<i class="fa fa-map-marker ddqcxyl2"></i>
<i class="fa fa-map-marker ddqcxyl22"></i>
<i class="fa fa-map-marker ddjs12"></i>
<i class="fa fa-map-marker ddjbs2"></i>
<i class="fa fa-map-marker ddhjl2"></i>
<i class="fa fa-map-marker ddyy2"></i>
<path id="path"
stroke="#fdb23c" stroke-width="4"
fill="none" />
<!---->
<defs>
<pattern id="pat" width="100%" height="100%" patternContentUnits="objectBoundingBox">
<image id="car" width="1" height="1.4"/>
</pattern>
</defs>
<!---->
<animate dur="3s" repeatCount="0" />
<!-- <image id="car" transform="translate(-30,-40)" width="70px" height="70px">
<animate values="0;1;1;1;1;0" dur="3s" repeatCount="0" />
</image> -->
<!-- <circle id="travel" cx="50" cy="50" r="50" fill="url(#car)"></circle> -->
svg图<!--运动的相关参数 1、href链接到图⽚ mpath链接到路径-->
<animateMotion id="motion" xlink:href="#travel" begin="indefinite" dur="3s" fill="freeze" repeatCount="1">
<mpath xlink:href="#path" />
</animateMotion>
<g id="travel" transform="translate(-30,-40)">
<circle cx="80" cy="80" r="20" fill="url(#pat)"></circle>
</g>
</svg>
⼤概的思路就是,先做⼀个Svg容器,设置宽⾼,然后把元素都放进去,animateMotion是控制运动的标签,pattern是填充的标签,相当于⾥⾯的img就是⽤来填充相连id的那个circle,path是运动路径,就是图⽚⾥的橘黄⾊轨迹,我在Controller⾥设置了动态⽣成的,后台路径数据传过来前台来渲染。
下⾯贴controller的内容:
var svg = ElementById('path');
var car = ElementById('car');
// car.setAttribute('style', 'border-radius: 25px;');
var anim = ElementById('motion');
$scope.clickgj =function(id){
gridService.search(id).success(function(response) {
// alert('2222');
var items = response.filter(function (e) { avelId == id; })
// $d = response.path;
// $scope.people=response;
// $scope.img = response.img;
svg.setAttribute('d', items[0].travelPath);
// fill="url(#car)"
car.setAttributeNS('/1999/xlink',"xlink:href",items[0].travelImg);
// travel.setAttributeNS('/1999/xlink',"fill",items[0].travelImg);
/
/ console.info('*******'+items[0].travelDetail);
// $scope.items = items[0].travelDetail;
//console.info(''+$scope.items);
// for(var i=0;i<detail.time.length;i++){}
anim.beginElement();
// PointAtLength(0);
});
}
gridservice⾥就是数据接⼝,相关数据传过来就可以运动了。不过现在的路径都是预先写好然后拼接的,希望以后能研究出只在地图上定点就能⾃动规划路径,嘻嘻?
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论