stroke-dashoffset不适用于SVG

Question

我是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> 

和CSS

#latter_q{ 

    animation: DrwaQ 2s linear alternate infinite; 
    animation-delay: 1s; 
    /*stroke-dashArray: 1100;*/ 
    stroke-dashoffset: 1100; 
    } 


    .Q{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 


/*opacity: 0;*/ 

    } 

    @keyframes DrawQ { 
     to { stroke-dashOffset: 0; } 
    } 

Answer 1

中风dashoffset不是CSS属性（但） - 你必须用JavaScript

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Answer 2

做到这一点终于搞定了。

CSS：

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

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

     stroke-dashoffset: 3447; 
     } 
    }