svg学习

其实一直想学习一下svg，但是每次看到那些茫茫多的内容，自己又都望而却步，现在手上有个项目，设计稿如下所示，本来想直接搞个图片贴上去就完了，但是会有自己的脚印移动，并且是曲线，这种css就不太行了，这里需要根据自己的进度来显示脚步的位置，这就是一个不规则的进度条了，思来想去，只能考虑canvas和svg了，到网上搜了下svg的效果，发现通过很少的代码就能实现可动的路径，于是，决定搞svg，然后就是到mdn上看文档了，这里使用到了path，看到贝塞尔曲线那里，已经被是完全看不懂了，根据这个项目，因为是需要精确定位每一个位置的，如果使用贝塞尔曲线，我就不知道怎么定位了，最后决定通过在path里面使用直线和圆弧（不是椭圆弧哦）来绘制整个赛道，使用圆弧也是因为可以通过三角函数精确计算线上的每一个位置。

贴一下我自己写的path路径吧

<svg width="100%" height="3600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path
    id="a"
    d="M180 20
    a462 462 0 0 1 400 231
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 110 410
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 110 410
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 110 410
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 190 330"
    fill="transparent"
    stroke="#fff"
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="36"
  />
  <path
    d="M180 20
    a462 462 0 0 1 400 231
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 110 410
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 110 410
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 110 410
    h-300a220 220 0 0 0 -110 410
    h300a220 220 0 0 1 190 330"
    fill="none"
    stroke="#D1E6B2"
    stroke-dasharray="20,10"
    stroke-width="5"
  />
  <path
    id="p"
    :d="myPath"
    fill="transparent"
    stroke-dasharray="20,10"
    stroke="#709E37"
    stroke-width="5"
  />
  <!-- <g>
    <image
      width="100"
      height="100"
      transform="translate(-50,-50)"
      style="position:relative;z-index: 50"
      clip-path="url(#clip)"
      xlink:href="https://developer.mozilla.org/static/img/favicon144.png"
    >
      <animateMotion dur="5s" repeatCount="1" fill="freeze">
        <mpath xlink:href="#p" />
      </animateMotion>
    </image>
    <circle r="56" fill="transparent" stroke-width="40" stroke="yellow" @click="test">
      <animateMotion dur="5s" repeatCount="1" fill="freeze">
        <mpath xlink:href="#p" />
      </animateMotion>
    </circle>
  </g>-->
</svg>
//自己的脚印的话，是通过css来实现的

<div ref="rect" class="test-rect">
  <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="" />
</div>

//脚印的css部分

.test-rect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  offset-distance: 0%;
  /*offset-path: path("M 20 30 L 160 180");*/
  animation: svg-path-animation 10s linear 0s normal forwards;
  offset-rotate: 0deg;
  & > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
@keyframes svg-path-animation {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

这里使用了css里面的

offset-path这个属性来匹配svg的path,这样来实现自己脚印跟随赛道移动的效果
本来之前想都通过svg来实现，但是呢在svg里面绘制圆形的图片可难到我了，搜了一下，大概可以通过剪切来实现

目前来看，做了个大概，还不知道符不符合要求。
说实话，网络上靠谱的svg教程是很少的，不过张鑫旭写了一系列的文章，算是非常好的教程了，如果哪位大神有非常好的svg学习资源以及方法，还请赐教。

svg跌跌撞撞的写了一些，结果发现在安卓和ios端反应不太一致，主要表现的栅格图片上，我使用的是image标签，但是，ios上要么显示不出来，要么不能沿着path运动，我也头大了，还得继续摸索呀，关键是项目时间还挺赶的。。。
还是学艺不精，解决问题的速度太慢了
未完待续，相信问题最终还是会解决的，到时候会把解决方案发出来，大家一切切磋