Javascript AnimeJS SVG路径的渐进填充
我有一个具有不同路径的SVG，我想为这些路径的“填充”设置动画，使其看起来像是“手绘”的 到目前为止，我觉得我使用anime.js的“strokedashcoffset”非常接近，但我不希望“边框”被动画化，我想要内部 以下是我所拥有的： JS: SVG/htmlJavascript AnimeJS SVG路径的渐进填充,javascript,svg,anime.js,Javascript,Svg,Anime.js,我有一个具有不同路径的SVG，我想为这些路径的“填充”设置动画，使其看起来像是“手绘”的 到目前为止，我觉得我使用anime.js的“strokedashcoffset”非常接近，但我不希望“边框”被动画化，我想要内部 以下是我所拥有的： JS: SVG/html <div id="cssSelector"> <svg width="100%" height="auto" viewBox="0 0 122.84119 21.
<div id="cssSelector">
<svg
width="100%"
height="auto"
viewBox="0 0 122.84119 21.053778">
<g
transform="translate(-44.718109,-94.290359)">
<g
fill="#FFF" fill-rule="evenodd" stroke="currentColor" stroke-width="0.1" class="lines" stroke-linecap="round"
id="text12">
<path
d="m 44.718109,95.475692 h 1.439333 v 19.755558 h -1.439333 z"
style=""
id="path14" />
<path
d="m 59.899459,114.29991 q -0.536222,0.508 -1.354666,0.79023 -0.790222,0.254 -1.665111,0.254 -1.919111,0 -2.963334,-1.04423 -1.044222,-1.07244 -1.044222,-2.96333 v -9.62378 h -2.709333 v -1.21355 h 2.709333 v -3.217336 h 1.411111 v 3.217336 h 4.684889 v 1.21355 h -4.684889 v 9.48267 q 0,1.43933 0.677334,2.20133 0.705555,0.73378 2.060222,0.73378 1.382889,0 2.286,-0.81844 z"
style=""
id="path16" />
<path
d="m 97.978291,95.475692 -6.688667,19.755558 h -1.524 L 83.641402,97.507692 77.488958,115.23125 h -1.524 L 69.24807,95.475692 h 1.523999 l 6.011334,17.779998 6.180666,-17.779998 h 1.382889 l 6.152444,17.808218 6.067778,-17.808218 z"
style=""
id="path18" />
<path
d="m 106.30297,115.34414 q -2.08845,0 -3.78178,-0.95956 -1.66511,-0.95956 -2.624668,-2.65289 -0.959556,-1.72155 -0.959556,-3.86644 0,-2.14489 0.959556,-3.83822 0.959558,-1.72156 2.624668,-2.68112 1.69333,-0.95955 3.78178,-0.95955 2.08844,0 3.75355,0.95955 1.69333,0.95956 2.65289,2.68112 0.95956,1.69333 0.95956,3.83822 0,2.14489 -0.95956,3.86644 -0.95956,1.69333 -2.65289,2.65289 -1.66511,0.95956 -3.75355,0.95956 z m 0,-1.27 q 1.69333,0 3.01977,-0.79023 1.35467,-0.79022 2.11667,-2.20133 0.79022,-1.41111 0.79022,-3.21733 0,-1.80622 -0.79022,-3.21734 -0.762,-1.41111 -2.11667,-2.20133 -1.32644,-0.79022 -3.01977,-0.79022 -1.69334,0 -3.048,0.79022 -1.32645,0.79022 -2.11667,2.20133 -0.762,1.41112 -0.762,3.21734 0,1.80622 0.762,3.21733 0.79022,1.41111 2.11667,2.20133 1.35466,0.79023 3.048,0.79023 z"
style=""
id="path20" />
<path
d="m 119.37382,103.71658 q 0.67733,-1.60867 2.11667,-2.45533 1.43933,-0.87489 3.49955,-0.87489 v 1.38289 l -0.33866,-0.0282 q -2.45534,0 -3.83823,1.55222 -1.38288,1.524 -1.38288,4.26155 v 7.67645 h -1.41112 v -14.732 h 1.35467 z"
style=""
id="path22" />
<path
d="m 134.12743,107.35725 -3.83822,3.49955 v 4.37445 h -1.41112 V 94.290359 h 1.41112 v 14.816661 l 9.42622,-8.60777 h 1.80622 l -6.35,5.95489 6.97089,8.77711 h -1.74978 z"
style=""
id="path24" />
<path
d="m 148.75404,115.34414 q -1.778,0 -3.38667,-0.53623 -1.60866,-0.53622 -2.51177,-1.35466 l 0.64911,-1.12889 q 0.90311,0.762 2.31422,1.27 1.43933,0.508 2.99155,0.508 2.22956,0 3.27378,-0.73378 1.07245,-0.73378 1.07245,-2.032 0,-0.93133 -0.59267,-1.46756 -0.56444,-0.53622 -1.41111,-0.79022 -0.84667,-0.254 -2.34245,-0.53622 -1.74977,-0.31044 -2.82222,-0.67733 -1.07244,-0.36689 -1.83444,-1.18534 -0.762,-0.81844 -0.762,-2.25777 0,-1.74978 1.43933,-2.87867 1.46756,-1.15711 4.14867,-1.15711 1.41111,0 2.794,0.39511 1.38289,0.39511 2.25778,1.04422 l -0.64912,1.12889 q -0.90311,-0.64911 -2.06022,-0.98778 -1.15711,-0.33866 -2.37066,-0.33866 -2.06023,0 -3.10445,0.762 -1.04422,0.762 -1.04422,2.00377 0,0.98778 0.59267,1.55223 0.59266,0.53622 1.43933,0.81844 0.87489,0.254 2.42711,0.56444 1.72156,0.31045 2.76578,0.67734 1.07244,0.33866 1.80622,1.12889 0.73378,0.79022 0.73378,2.17311 0,1.83444 -1.524,2.93511 -1.524,1.10067 -4.28978,1.10067 z"
style=""
id="path26" />
<path
d="m 165.55552,95.475692 h 1.63689 l -0.28222,14.082888 h -1.07245 z m 0.81845,19.868448 q -0.47978,0 -0.81845,-0.33867 -0.33866,-0.33867 -0.33866,-0.81845 0,-0.47977 0.33866,-0.81844 0.33867,-0.33867 0.81845,-0.33867 0.508,0 0.84666,0.33867 0.33867,0.33867 0.33867,0.81844 0,0.47978 -0.33867,0.81845 -0.33866,0.33867 -0.84666,0.33867 z"
style=""
id="path28" />
</g>
</g>
</svg>
</div>
感谢您的帮助，并为糟糕的英语感到抱歉：）显然，使用纯CSS无法做到这一点。完成了本教程，效果非常好
填充没有方向，您需要自己详细描述。对于这些类似文本的形状，你需要沿着“书写”的方向努力。请看一个可能对你有用的技术。我来看看这个。谢谢
<div id="cssSelector">
<svg
width="100%"
height="auto"
viewBox="0 0 122.84119 21.053778">
<g
transform="translate(-44.718109,-94.290359)">
<g
fill="#FFF" fill-rule="evenodd" stroke="currentColor" stroke-width="0.1" class="lines" stroke-linecap="round"
id="text12">
<path
d="m 44.718109,95.475692 h 1.439333 v 19.755558 h -1.439333 z"
style=""
id="path14" />
<path
d="m 59.899459,114.29991 q -0.536222,0.508 -1.354666,0.79023 -0.790222,0.254 -1.665111,0.254 -1.919111,0 -2.963334,-1.04423 -1.044222,-1.07244 -1.044222,-2.96333 v -9.62378 h -2.709333 v -1.21355 h 2.709333 v -3.217336 h 1.411111 v 3.217336 h 4.684889 v 1.21355 h -4.684889 v 9.48267 q 0,1.43933 0.677334,2.20133 0.705555,0.73378 2.060222,0.73378 1.382889,0 2.286,-0.81844 z"
style=""
id="path16" />
<path
d="m 97.978291,95.475692 -6.688667,19.755558 h -1.524 L 83.641402,97.507692 77.488958,115.23125 h -1.524 L 69.24807,95.475692 h 1.523999 l 6.011334,17.779998 6.180666,-17.779998 h 1.382889 l 6.152444,17.808218 6.067778,-17.808218 z"
style=""
id="path18" />
<path
d="m 106.30297,115.34414 q -2.08845,0 -3.78178,-0.95956 -1.66511,-0.95956 -2.624668,-2.65289 -0.959556,-1.72155 -0.959556,-3.86644 0,-2.14489 0.959556,-3.83822 0.959558,-1.72156 2.624668,-2.68112 1.69333,-0.95955 3.78178,-0.95955 2.08844,0 3.75355,0.95955 1.69333,0.95956 2.65289,2.68112 0.95956,1.69333 0.95956,3.83822 0,2.14489 -0.95956,3.86644 -0.95956,1.69333 -2.65289,2.65289 -1.66511,0.95956 -3.75355,0.95956 z m 0,-1.27 q 1.69333,0 3.01977,-0.79023 1.35467,-0.79022 2.11667,-2.20133 0.79022,-1.41111 0.79022,-3.21733 0,-1.80622 -0.79022,-3.21734 -0.762,-1.41111 -2.11667,-2.20133 -1.32644,-0.79022 -3.01977,-0.79022 -1.69334,0 -3.048,0.79022 -1.32645,0.79022 -2.11667,2.20133 -0.762,1.41112 -0.762,3.21734 0,1.80622 0.762,3.21733 0.79022,1.41111 2.11667,2.20133 1.35466,0.79023 3.048,0.79023 z"
style=""
id="path20" />
<path
d="m 119.37382,103.71658 q 0.67733,-1.60867 2.11667,-2.45533 1.43933,-0.87489 3.49955,-0.87489 v 1.38289 l -0.33866,-0.0282 q -2.45534,0 -3.83823,1.55222 -1.38288,1.524 -1.38288,4.26155 v 7.67645 h -1.41112 v -14.732 h 1.35467 z"
style=""
id="path22" />
<path
d="m 134.12743,107.35725 -3.83822,3.49955 v 4.37445 h -1.41112 V 94.290359 h 1.41112 v 14.816661 l 9.42622,-8.60777 h 1.80622 l -6.35,5.95489 6.97089,8.77711 h -1.74978 z"
style=""
id="path24" />
<path
d="m 148.75404,115.34414 q -1.778,0 -3.38667,-0.53623 -1.60866,-0.53622 -2.51177,-1.35466 l 0.64911,-1.12889 q 0.90311,0.762 2.31422,1.27 1.43933,0.508 2.99155,0.508 2.22956,0 3.27378,-0.73378 1.07245,-0.73378 1.07245,-2.032 0,-0.93133 -0.59267,-1.46756 -0.56444,-0.53622 -1.41111,-0.79022 -0.84667,-0.254 -2.34245,-0.53622 -1.74977,-0.31044 -2.82222,-0.67733 -1.07244,-0.36689 -1.83444,-1.18534 -0.762,-0.81844 -0.762,-2.25777 0,-1.74978 1.43933,-2.87867 1.46756,-1.15711 4.14867,-1.15711 1.41111,0 2.794,0.39511 1.38289,0.39511 2.25778,1.04422 l -0.64912,1.12889 q -0.90311,-0.64911 -2.06022,-0.98778 -1.15711,-0.33866 -2.37066,-0.33866 -2.06023,0 -3.10445,0.762 -1.04422,0.762 -1.04422,2.00377 0,0.98778 0.59267,1.55223 0.59266,0.53622 1.43933,0.81844 0.87489,0.254 2.42711,0.56444 1.72156,0.31045 2.76578,0.67734 1.07244,0.33866 1.80622,1.12889 0.73378,0.79022 0.73378,2.17311 0,1.83444 -1.524,2.93511 -1.524,1.10067 -4.28978,1.10067 z"
style=""
id="path26" />
<path
d="m 165.55552,95.475692 h 1.63689 l -0.28222,14.082888 h -1.07245 z m 0.81845,19.868448 q -0.47978,0 -0.81845,-0.33867 -0.33866,-0.33867 -0.33866,-0.81845 0,-0.47977 0.33866,-0.81844 0.33867,-0.33867 0.81845,-0.33867 0.508,0 0.84666,0.33867 0.33867,0.33867 0.33867,0.81844 0,0.47978 -0.33867,0.81845 -0.33866,0.33867 -0.84666,0.33867 z"
style=""
id="path28" />
</g>
</g>
</svg>
</div>