gpt4 book ai didi

css - stroke-dashoffset 不适用于 SVG

转载 作者:行者123 更新时间:2023-11-28 15:15:40 26 4
gpt4 key购买 nike

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

最佳答案

终于成功了。

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 - stroke-dashoffset 不适用于 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44288093/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com