轮廓三角形 svg 动画

Question

我创建了一个简单的轮廓三角形。我需要解决的问题 - 是创建从下到上填充三角形之间间隙的动画。

当我对多边形使用填充选项时，填充区域与另一个三角形重叠，因此形状中没有 "hole"。

body{
  background: #7085EA;
}

.triangle-container{
  width: 500px;
  margin: auto;
  text-align:center;
}

.triangle {
  stroke: #fff;
  fill: transparent;
}

<div class="triangle-container">
  <svg height="500" width="500">
    <polygon points="250,100 100,400 400,400" class="triangle"/>
    <polygon points="250,180 160,360 340,360" class="triangle"/>
  </svg>
</div>

初始代码笔为 here。

需要填写的区域如截图所示

感谢任何帮助。提前致谢！

Answer 1

根据此处的建议和另一个 SO ，提出了以下解决方案：

body{
  background: #7085EA;
}

.triangle-container{
  width: 500px;
  margin: auto;
  text-align:center;
}

.triangle {
  stroke: #fff;
  
}

<div class="triangle-container">
   <svg height="500" width="500">
      <linearGradient id="loading" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="40%" stop-opacity="1" stop-color="#fff">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="#fff">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s"  begin="0s"/>
          </stop>
      </linearGradient>
     <path d="M250,100 L100,400 400,400 250,100 M250,180 L340,360 160,360 250,180z" class="triangle" fill="url(#loading)"></path>
   </svg>
</div>

轮廓三角形 svg 动画

Outlined triangle svg animation

css

svg

svg-animate