如何设置SVG多边形的动画？

Question

我有一个由两个多边形和一个矩形组成的SVG字母（A）。我想对它们进行动画处理，使第一个多边形逐渐变得可见，然后第二个逐渐增长。在那之后，矩形将变得可见。在动画开始之前，SVG将不可见。

我尝试了关键帧笔划，但由于它们不是基于路径的而是多边形点，所以它不起作用。

<svg height="600" width="800">
  <polygon  points="34 537,150 536,289 130,314 53,196 51"/>
    <animate attributeName="points" dur="5s" fill="freeze"  />
  
   <polygon  points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
   <rect x="120" y="320"  stroke-miterlimit="10" width="270" height="120"/>
 </svg>

如果您想使用它，这是一支笔：https : //codepen.io/anon/pen/vMxXaP

Answer 1

奖金版本。在这里，我将你的路径变成了蒙版并添加了背景动画。

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800">
   <style>  
    svg {
      height:160px;
      background: url(https://i.imgur.com/Pr8tfnT.png);
      background-position: 0px 111px;
      background-repeat: repeat-x;
      background-size: 100%;
      animation: water 10s forwards;
    }

    @keyframes water {
      100% {
        background-position: 2000px 0px;
      }
    }
   </style>   
   <mask id="mask" fill="black">
    <rect fill="white" width="600" height="800"/>
    <polygon id="right" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
    <polygon id="left"  points="34 537,150 536,289 130,314 53,196 51"/>
    <rect id="rect1" x="120" y="320"  stroke-miterlimit="10" width="270" height="120"/> 
   </mask>

   <rect fill="white" width="600" height="800" mask="url(#mask)"/>
</svg>

Answer 2

您仍然可以通过使用带有笔触的多边形而不是填充来绘制（A）字母。下面的示例在stroke-dasharray上使用两个关键帧动画，以两个步骤绘制A字母：

1. 左上角和右上角线的第一步（svg中的第一个多边形元素）
2. 关闭A的水平线的第二步（svg元素中的第二个多边形）

.letter {
  width:200px;height:auto;
  stroke-width:2.5;
  stroke:#000;
  fill:none;
  stroke-dasharray: 0 24;
}
.animateFirst { animation: 0.5s animateFirst ease-in forwards; }
.animateSecond { animation: 0.2s 0.45s animateSecond ease-out forwards; }

@keyframes animateFirst {
  to { stroke-dasharray: 24 24; }
}
@keyframes animateSecond {
  to { stroke-dasharray: 6 24; }
}

<svg class="letter" viewbox="0 0 12 10">
  <polygon class="animateFirst" points="1,11.5 6,0 11,11.5" />
  <polygon class="animateSecond" points="3,6.5 9,6.5" />  
</svg>