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> -->
            
            <!--运动的相关参数  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 = document.getElementById('path');
  var car = document.getElementById('car');
  // car.setAttribute('style', 'border-radius: 25px;');
  var anim = document.getElementById('motion');

  $scope.clickgj =function(id){
   
      gridService.search(id).success(function(response) {
          // alert('2222');
          var items = response.filter(function (e) { return e.travelId == id; })
          // $scope.myd = response.path;
          // $scope.people=response;
          // $scope.img = response.img;
          svg.setAttribute('d', items[0].travelPath);
          // fill="url(#car)"
         car.setAttributeNS('http://www.w3.org/1999/xlink',"xlink:href",items[0].travelImg);
          // travel.setAttributeNS('http://www.w3.org/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();
           // svg.path.getPointAtLength(0);
      });
    
   }

gridservice里就是数据接口，相关数据传过来就可以运动了。不过现在的路径都是预先写好然后拼接的，希望以后能研究出只在地图上定点就能自动规划路径，嘻嘻?