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

终于搞定了。

CSS：

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

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

        stroke-dashoffset: 3447;
        }
    }

Answer 2

stroke-dashoffset不是CSS属性（还有） - 您必须使用JavaScript

执行此操作

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

stroke-dashoffset不能与SVG一起使用

2 个答案: