这是我的JSfiddle https://jsfiddle.net/9005q67j/我正在尝试制作一个 SVG Arc 进度条,在进度条的末尾有一个常量对象。当我使用 JavaScript 为其设置动画时,常量对象在达到 100% 时会移至另一侧。否则它工作得很好。另外,当使用 Safari 时,我发现常量对象的中风破折号数组有 1 像素差异。
我的问题和疑虑
1) 我真的很喜欢 SVG 对象的质量,但它对于像 Canvas 这样的跨浏览器渲染有好处吗? (Canvas 与 SVG 性能和浏览器支持)
2)如何防止恒定物体在达到100%时跑到另一边?
3)如何使其响应式?
HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#56c4fb" />
<stop offset="100%" stop-color="#0baeff" />
</linearGradient>
<path class="grey" d="M30,90 A40,40 0 1,1 80,90" style="fill:none;"/>
<path id="purple" class="purple" d="M30,90 A40,40 0 1,1 80,90" style="fill:none; transition: .3s;"/>
<path id="white" class="white" d="M30,90 A40,40 0 1,1 80,90" style="fill:none; transition: .3s;"/>
</svg>
CSS
svg {
height: 90vh;
margin: auto;
display: block;
}
path {
stroke-linecap: round;
stroke-width: 6;
}
path.grey {
stroke: #e7e7e8;
}
path.purple {
stroke: url(#gradient);
stroke-dasharray: 198;
stroke-dashoffset: 198;
animation: dash 5s linear forwards;
}
path.white {
stroke: #ffffff;
stroke-dasharray: 0px, 198px;
stroke-dashoffset: 198;
stroke-width: 3.5px;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}