html - 如何为 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

您仍然可以使用带描边而不是填充的多边形来绘制 (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>