こんにちは。
aiデータから、パスをsvgを書き出しstrokeをanimationさせて四角い線を描かせたいのですが、
実行すると開始点から2方向に線が伸びてゆき、1周目で想定の半分程度の細さの線が描かれ、2周目で想定したwidthの線になり終了します。
1方向に線が伸び、1周で想定したwidthの線で終了させるにはどうすればよいでしょうか。
svgのパス
html
1<svg viewBox="0 0 1000 521"> 2 <g id="box01"> 3 <path class="box" d="M999,49V167H741V49H999m1-1H740V168h260V48Z"/> 4 </g> 5</svg>
css
css
1.box { 2 fill:none; 3 stroke:#FFFFFF; 4 stroke-width: 1; 5 stroke-dashoffset:10px; 6 stroke-dasharray: 4000; 7 stroke-dashoffset: 4000; 8 animation: SVG-anim 10s 3s ease forwards; 9} 10 11@keyframes SVG-anim { 12 0% { 13 stroke-dashoffset: 4000; 14 } 15 100% { 16 stroke-dashoffset: 0; 17 } 18}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。