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>

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>

Answer 2

这个想法来自，但我在没有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>

SVG蜂窝多边形填充动画

SVG honeycomb polygon filling animation

html

animation

svg

svg-animate