Css 笔划dashoffset不使用SVG

我不熟悉SVG和动画。 刚刚创建了一个路径，并希望用动画绘制它，我正在使用“stroke dashoffset”，但它不起作用。 这是我的HTML：

<div class="Q">
    <svg height="100%" width="100%" viewBox="200 0 400 400">


    <path id="latter_q" d="M1003.3425022861358,2828.211816939241a655.718421,655.718421,0,1,1,-397.5557043956452,543.2070169791295" style="fill: none; stroke-width: 300px; stroke-linecap: round;" transform="matrix(-0.220662 -0.00474159 0.00474159 -0.220662 452.115 953.136)" stroke="purple"/>

    <circle id="e4_circle" cx="322" cy="293" stroke="purple" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="38.1936" fill="purple" />

    <polygon stroke="purple" id="e5_polygon" style="stroke-width: 1px;" points="625.5 543.206 885.5 7.20558 1149.5 535.206 1021.5 481.206 889.5 225.206 767.5 481.206" fill="purple" transform="matrix(0.618136 0 0 0.618136 -4.20822 17.3249)"/>
    </svg>
</div>

---

stroke dashoffset还不是CSS属性——您必须使用JavaScript来实现这一点

---

笔划dashoffset还不是CSS属性-您必须使用JavaScript来实现这一点

终于成功了

CSS:

#latter_q{
    animation: DrwaQ 2s ease-in ;
    animation-delay: 0s;
    stroke-dasharray: 3435;
    }

    @keyframes DrwaQ {
        to {
        stroke-dashoffset: 6904;
        }
        from {

        stroke-dashoffset: 3447;
        }
    }

终于成功了

CSS:

#latter_q{
    animation: DrwaQ 2s ease-in ;
    animation-delay: 0s;
    stroke-dasharray: 3435;
    }

    @keyframes DrwaQ {
        to {
        stroke-dashoffset: 6904;
        }
        from {

        stroke-dashoffset: 3447;
        }
    }