标签：ima width amp 匹配 ash favicon mat 显示 https
其实一直想学习一下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" />
</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学习资源以及方法，还请赐教。
标签：ima width amp 匹配 ash favicon mat 显示 https
原文地址：https://www.cnblogs.com/ysla/p/13289936.html
