如何为SVG设置动画（使用多边形，而不是路径）？

Question

我有一个SVG，我试图用＃34;＆＃34;＆＃34;在页面上。但我不确定我做错了什么，但它什么也做不了。

这是我的SVG代码：

{
    "scope": "basic,",
    "refreshToken": "c2a4f22b-6446-49ad-8cc9-ef1a844d6cbb",
    "tokenType": "bearer",
    "expiresIn": "2591892",
    "accessToken": "54b3f27b-ad5c-4d7b-ae5d-07f56f5f2f42",
    "editByUser": "0"
}

以下是我尝试过的代码：

https://css-tricks.com/svg-line-animation-works/

            <svg width="1366px" height="534px" viewBox="0 0 1366 534" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                    <linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-1">
                        <stop stop-color="#0077C0" offset="0%"></stop>
                        <stop stop-color="#0581A6" offset="0%"></stop>
                        <stop stop-color="#5DB9E8" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <g id="Final-Option" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="path">
                    <g id="FCCC-HP" transform="translate(0.000000,-3117.000000)" fill="url(#linearGradient-1)">
                        <polygon id="Logo-Outlined" points="459.366212 3117 213.015827 3543.85325 136.72131 3411.78064 133.923592 3404.66263 -26 3680.75946 -19.4896353 3684.5416 133.243066 3420.85779 208.630216 3551.41755 213.015827 3558.98185 215.133019 3555.35098 459.366212 3132.12859 633.354006 3433.25567 727.871496 3597.40091 956.60382 3201.49319 1185.18492 3597.40091 1303.74766 3391.87897 1491.42158 3717 1498 3713.21029 1303.74766 3376.75794 1185.18492 3582.27988 956.60382 3186.35703 727.871496 3582.27988"></polygon>
                    </g>
                </g>
            </svg>

我也试过这个：

https://codepen.io/MyXoToD/post/howto-self-drawing-svg-animation

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 5s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

我之前从未动画过SVG，所以任何帮助都会非常感激!!