html - SVG蜂窝多边形填充动画

Question

我可以使用带有动画的路径填充 SVG 吗？像这样

<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" stroke="white" />
   <g opacity="0.5">
      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="0" width="21" height="17">
         <path d="M10 17V6.5L11 0L30.5 13.5L22 10L10 17Z" fill="white" />
      </mask>
      <g mask="url(#mask0)">
         <path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" fill="white" />
      </g>
   </g>
</svg>

标签： htmlanimationsvgsvg-animate

Answer 1

对于动画，我使用的是圆形路径（#test），并且我正在对 stroke-dasharray 属性进行动画处理。路径被剪裁为六边形路径。

作为观察，动画路径的半径为 5（所需半径的一半），笔划的宽度为 10。当使用 stroke-width =10 时，笔划从中心覆盖路径并呈现圆形半径 r=10

let l = test.getTotalLength();// the total length of the path
let stroke = 0;// the initial length of the stroke


function Animation(){
  requestAnimationFrame(Animation);
  if(stroke < l){stroke += .1}else{stroke= 0};//increase the length of the stroke
  
  //the stroke-dasharray's stroke (first parameter) == stroke
  //the stroke-dasharray's gap (second parameter) == the total length of the path (l) minus the length of the stroke
  test.setAttribute("stroke-dasharray",`${stroke} ${l-stroke}`)
}
  
Animation()

svg{border:solid; overflow:visible}

body{background:#ccc}

<svg viewBox="-1 0 22 23" width="200">
  <clipPath id="clip">
  <path id="thePath"  d="M9.00035 1.55536L2.02871 5.42849C1.39378 5.78123 1 6.45047 1 7.17681V15.8232C1 16.5495 1.39378 17.2188 2.02871 17.5715L9.00035 21.4446C9.61973 21.7887 10.3749 21.7794 10.9857 21.4202L17.514 17.58C18.1249 17.2206 18.5 16.5648 18.5 15.8561V7.14389C18.5 6.43516 18.1249 5.77936 17.514 5.42002L10.9857 1.57981C10.375 1.22056 9.61973 1.21126 9.00035 1.55536Z"/>
  </clipPath>
  <desc>The next path is drawing a circle with the radius = 5. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10</desc>
  <path d="M10,6.5 A5,5 0 0 1 10,16.5 A5,5 0 0 1 10,6.5 " id="test" fill="none" stroke="black" stroke-dasharray="0 62.43" stroke-width="10"  clip-path="url(#clip)" />
  
   <use xlink:href="#thePath"  stroke="white" fill="none" />
</svg>