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>

- Rohit Chahar

---

你能否编辑你的问题并解释一下你需要什么样的动画？它是像充电电池动画吗？ - enxaneta

@enxaneta附上了一张图片，请查看。 - Rohit Chahar

它应该如何动画呢？像时钟的秒针一样吗？ - Robert Longson

@RobertLongson 是的，没错。 - Rohit Chahar

@RohitChahar，在StackOverflow上感谢别人的方式是通过点赞和接受答案。如果您对下面的某个答案感到满意，请在答案左侧将其标记为已接受并/或点赞。您还将因此获得2个声望点。 - Bharata

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>

- enxaneta

---

+1。很好的答案！我已经根据您的想法实现了它，没有使用JavaScript，并且使用了原始路径，因为我认为主题所有者只想在SVG中使用它。我希望你没有反对？但如果您有任何意见，请写信告诉我，我会删除我的答案。 - Bharata

Answer 2

这个想法来自@enxaneta答案，但我没有使用JavaScript并且使用原始路径实现了它。关于解释，你可以在他的答案中找到。如果你想让持续时间为60秒，那么你可以将dur="10s"改为dur="60s"。

svg{background:#956}

<svg width="180" viewBox="0 0 31 29">
<g transform="translate(6 -3)">
    <clipPath id="clip">
        <path id="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"/>
    </clipPath>
    <path d="M10,12.5A5,5 0 0 1 10,22.5A5,5 0 0 1 10,12.5" fill="none" stroke="#cab" stroke-dasharray="0 62.84" stroke-width="10" clip-path="url(#clip)">
        <animate attributeName="stroke-dasharray"
            values="0 31.4;10 21.4;20 11.4;31.4 0" begin="0s" dur="10s" fill="freeze"/>
    </path>
    <use xlink:href="#path"  stroke="#fff" fill="none"/>
</g>
</svg>

- Bharata