1

我将使用 apath-dasharray和的组合进行无缝循环pathdashoffset

我的路径长度16.568147659301758由 safari 和 chrome 报告，但浏览器之间的动画循环不同。

即使pathLength="1"设置在<path> （现在由现代 safari 支持）上。我仍然感到不一致。

有什么方法可以抽象或绕过行为上的分歧？我敢肯定，许多图形库不得不以某种方式解决这个问题。

此处为pathLength="1"的 codepen

codepen 在此处使用定义的 16.568147659301758

// not needed 
// just to see
//  
// 16.568147659301758

var path = document.querySelector("svg path");
var total = path.getTotalLength();
console.log(total);
@keyframes ldmv{100%{stroke-dashoffset: 16.568147659301758}}
.mkldr{
stroke-dasharray: 2.5 13.06814765930175 ;
animation: ldmv 3s linear infinite;}


/* uncomment below if using   pathLength="1" on the <path */

/* 
@keyframes ldmv{100%{stroke-dashoffset: 1}}
.mkldr{
stroke-dasharray: .1 .9;
animation: ldmv 3s linear infinite;} 
*/
<svg width="256" height="256"
class="mkldr"
viewbox="0 0 6 5"
stroke="currentcolor"
fill="none"
stroke-linecap="butt"
stroke-width=".6">
<!-- no   pathLength="1" below -->
<path 
  id="mkldr" 
  d="m .5 2 
  a 1 1 0 0 1 2 0 l 0 1 
  a 1 1 0 0 0 2 0 l 0 -1 
  a 1 1 0 0 0 -2 0 l 0 1 
  a 1 1 0 0 1 -2 0 z" />
<use  
  xlink:href="#mkldr"  
  transform="
  scale(1,-1) 
  translate(1, -5)"/>

4

0 回答 0