为什么我的 SVG 没有采用预期的颜色？
Why my SVG do not take the expected color?
我创建了一个动画文本，它适用于 SVG PATH 和 MASK。
问题是我不明白为什么我不能把它填成白色:/
我试过用fill属性或者stroke...毕竟我做了没有关系。很奇怪，你知道为什么它没有达到预期的颜色吗？
有人有解决方案或关于如何使它变白的想法吗？
body {
background-color: red;
}
mask path {
fill: none;
stroke: white;
stroke-width: 20;
}
#maskH path,
#maskH2 path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 2s linear 1 forwards;
stroke-width: 19.5;
}
#maskI path,
#maskT path,
#maskT2 path,
#maskF path,
#maskU path,
#maskU2 path,
#maskE path,
#maskE2 path,
#maskG path,
#maskR path,
#maskS path,
#maskT2 path,
#maskA path,
#maskN path,
#maskP path,
#maskT path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 3s linear 1 forwards;
stroke-width: 19.5;
}
#maskT path {
stroke-width: 9.6;
}
#maskT2 path {
stroke-width: 9.8;
}
#maskA path {
stroke-width: 18;
}
#maskP path {
stroke-width: 19.4;
}
#maskN path {
stroke-width: 20;
}
@keyframes brush {
0% {
stroke-dashoffset: 500;
}
20% {
stroke-dashoffset: 500;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<svg height="300px" width="900px" id="FlorianCargouet" data-name="byflo-io" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1107.2 69.56">
<mask id="maskS">
<path d="M73.9,30.26c-16.7-8.75-32.61-7.37-38.23,0.48c-3.28,4.58-4.06,12.76-0.44,17.78c1.5,2.07,3.31,3.01,13.03,6.19
c16.47,5.39,20.71,5.81,23.08,10.01c2.02,3.6,1.68,8.22,0.18,11.47c-1.89,4.08-5.57,5.92-7.45,6.85
c-12.88,6.41-34.08-3.11-36.75-4.34" />
</mask>
<mask id="maskH">
<path d="M92.2,22.2 92.2,89.5 92.2,16.5 150.2,16.5 150.2,89.5 90.6,81.4 90.6,54.8 153.2,54.8 " />
</mask>
<mask id="maskA">
<path d="M160.4,89.6 189.9,23.8 200.8,23.8 231.2,89.6 226.1,67.1 172.7,67.4 " />
</mask>
<mask id="maskP">
<path
d="M241.4,21.9 241.4,89.5 228.7,22.1 275.5,22.6 281.6,24 286.2,26.4 290.6,30.2 293.3,34 295.5,39.9
296.1,45.3 296,48.4 295.3,51.9 294,55.6 292.1,59 289.6,61.8 286.2,64.5 281.9,66.8 277.5,68 272,68.8 251.1,69.1 " />
</mask>
<mask id="maskI">
<path d="M315,22.1 315,55.8 315,89.5 " />
</mask>
<mask id="maskN">
<path d="M340.2,89.4 340.2,21.9 350,39.5 389.5,88.5 391.1,89.6 398.3,89.6 398.3,22.1 388.4,22.1 347.3,22 " />
</mask>
<mask id="maskT">
<path d="M537.5,22.1 537.5,89.5 497.3,26.5 565.4,26.5 " />
</mask>
<mask id="maskT2">
<path d="M900.3,22.1 900.3,90.2 863.5,26.3 929.1,26.3 " />
</mask>
<mask id="maskH2">
<!-- <path d="M576.1,22.1 576.1,89.5 563.7,55.8 622.1,54.7 605.2,53.1 605.2,14.3 629.6,14.3 629.6,89.5 " /> -->
<path d="M576.1,22.1c0,22.5,0,44.9,0,67.4V12.2h58.1v77.3l-61.9-8.4V54.8h64.5" />
</mask>
<mask id="maskF">
<path d="M794.4,22.1 745.4,22.1 745.4,89.5 741.7,53.8 788.7,53.8 " />
</mask>
<mask id="maskU">
<path d="M806,22c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskU2">
<path d="M936.5,21.8c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskE">
<path d="M702.2,22.1 654.6,22.1 654.6,89.5 703.6,89.5 650,89.5 664.4,59.4 698,59.4 " />
</mask>
<mask id="maskE2">
<path d="M1131.9,22.1 1084.3,22.1 1084.3,89.5 1133.3,89.5 1079.7,89.5 1094.1,59.4 1127.7,59.4 " />
</mask>
<mask id="maskG">
<path d="M475.4,31.4c-1.1-1.1-2.6-2.5-4.7-4c-6.6-4.7-13.2-5.7-15.9-6.1c-2.5-0.4-8.8-1-16.4,1.2
c-3.1,0.9-9.3,2.8-15.1,8.3c-1.5,1.4-4.6,4.6-7.1,9.7c-0.7,1.4-2.2,4.9-3,9.7c-1.2,7.6,0.4,13.7,1.1,15.9c1.7,5.5,4.4,9.2,5.8,11.1
c2,2.5,5.4,6.2,10.8,9.1c6.6,3.5,12.6,3.9,16.2,4.1c8.1,0.4,14.2-1.6,16.1-2.3c7-2.5,9.2-3.6,10.3-5.5c0.9-1.6,1.1-3.1,1.2-5.3
c0.3-4.7,0.3-7.9,0-15.6c-0.2-3.8-0.2-4.2-0.2-6.2c0-2.6,0.1-4.7,0.2-6.1" />
</mask>
<mask id="maskR">
<path d="M1014.1,21.4l0,68l-1-59.2c11.7,0.4,19.8,0.6,24.6,0.4c0,0,3.9-0.2,9.9,0.8c0.9,0.1,2.2,0.4,3.7,1.1
c0.8,0.4,2.7,1.4,4.3,3.4c2.3,2.8,2.8,5.8,3,7.4c0.6,4.3-0.6,7.8-1.4,9.4l-1.2,2l-2.6,2.6l-12.4,3.3l-17.2,0.1l20.5,8.5l0.6,0.4
l0.8,0.9l12.2,17.3l1.2,1.3l1.6,0.4l2.8,0l6.3,0" />
</mask>
<path mask="url(#maskN)"
d="M340.18,21.91c2.5,0,4.84-.15,7.13.08.8.08,1.64,1,2.23,1.71q18.6,23,37.15,46.13c.41.51.87,1,1.73,2V22.1h9.85V89.63c-2.4,0-4.8.15-7.15-.08-.8-.08-1.64-1-2.23-1.73q-18.28-22.65-36.51-45.36l-2.41-3V89.43h-9.78C340.18,67.07,340.18,44.71,340.18,21.91Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskR)"
d="M1014.06,21.39c12.23.53,24.39-.18,36.08,1.83,20.18,3.47,22,24.38,14.8,35.43-2.6,4-6.38,6.48-11.1,8.3l7.92,11.25,8,11.44c-3.64,0-6.75.08-9.86-.07-.63,0-1.37-.81-1.81-1.42-4.16-5.83-8.24-11.71-12.4-17.53-.48-.67-1.32-1.52-2-1.54-6.56-.12-13.12-.07-20-.07V89.52h-9.68C1014.06,67.05,1014.06,44.63,1014.06,21.39Zm9.84,8.78V60.7c4.79,0,9.36.08,13.92,0A59.93,59.93,0,0,0,1047,60c7.5-1.37,11.87-6.83,11.85-14.43s-4.28-13.37-11.89-14.29S1031.75,30.49,1023.9,30.17Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH)" d="M150.16,89.53h-9.67V59.69H102V89.44H92.1V22.11h9.68V50.85h38.54V22.1h9.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH2)" d="M634.23,89.53h-9.68V59.69h-38.7V89.51h-9.7V22.06h9.62V50.79H624.4V22.08h9.83Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE)" d="M702.29,22.12V30.4H664.46V50.93H698v8.49H664.46V81h39.08v8.54H654.6V22.11Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE2)" d="M1084.35,89.46V22.07h47.55v8.27h-37.76V51h33.62v8.36h-33.59V81h39.15v8.42Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskG)"
d="M465.42,55.44h9.21a8,8,0,0,1,.28,1.48c0,7.75.09,15.49-.07,23.24A4.61,4.61,0,0,1,473,83.28a40.36,40.36,0,0,1-22.76,7.15c-12,.16-22.33-3.62-29.91-13.24C405.43,58.32,413.55,27.36,440.8,22c10.94-2.15,21.4-.92,30.67,5.93,1.38,1,2.6,2.27,4,3.49l-6.23,5.92a28.06,28.06,0,0,0-14.08-7c-15.81-2.43-28.82,5.55-31.8,20.19C419.92,67.37,432.5,82,450.13,81.63a32.28,32.28,0,0,0,13.05-2.9,3.35,3.35,0,0,0,2.29-3.58C465.35,68.68,465.42,62.2,465.42,55.44Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskP)"
d="M241.44,21.9c3.73,0,7.3-.06,10.86,0,7.74.16,15.54-.16,23.2.72,10.68,1.23,18,8,19.95,17.26,3.12,14.61-5.19,26.62-20.36,28.58-6.57.85-13.3.49-19.95.67-1.24,0-2.48,0-4.06,0V89.49h-9.64Zm9.76,8.28V60.45c6.85,0,13.51.18,20.16-.07a16,16,0,0,0,10.12-3.76c4.9-4.31,5.55-9.85,4.06-15.77s-5.88-9-11.5-9.64C266.54,30.4,259,30.49,251.2,30.18Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskA)"
d="M231.22,89.64c-3.31,0-6.14.12-8.95-.08a3.11,3.11,0,0,1-2-1.71c-2-4.37-4-8.78-5.84-13.24a2.73,2.73,0,0,0-3-1.93c-10.5.07-21,.1-31.49,0-1.85,0-2.62.71-3.27,2.28-1.78,4.3-3.79,8.51-5.55,12.82a2.62,2.62,0,0,1-3,1.89c-2.49-.13-5,0-7.75,0,.26-.81.4-1.42.65-2Q175.52,55.71,190,23.77c.65-1.43,1.55-1.69,3-1.95,5.88-1,8.57,1.55,10.89,6.93,8.38,19.48,17.39,38.69,26.16,58C230.37,87.57,230.7,88.4,231.22,89.64Zm-21.1-24.8L195.65,32,181.21,64.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU)"
d="M806,22h9.9v3.27c0,11.58-.08,23.15,0,34.73a42.2,42.2,0,0,0,1.13,9.37c1.21,5,4.14,8.92,9.15,10.77a23.2,23.2,0,0,0,17.3-.1c8.29-3.42,10.18-10.7,10.3-18.62.19-12.16,0-24.32.06-36.48V22.07h9.43c0,.9.12,1.71.12,2.52,0,12.41.18,24.82-.1,37.22a41.8,41.8,0,0,1-2.22,12.44c-2.64,7.64-8.24,12.58-16,14.8a37.77,37.77,0,0,1-19.74.25c-11-2.76-18.3-11.41-18.88-23.58-.63-13.13-.34-26.3-.45-39.46C806,25,806,23.64,806,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU2)"
d="M936.85,22h9.74v2.8c0,11.91-.06,23.83,0,35.74,0,5.2.68,10.38,4,14.67A13.86,13.86,0,0,0,955,79.16c7.25,3.64,14.65,3.67,21.72-.37,5.24-3,7.23-8.26,7.54-13.92.43-7.81.33-15.65.39-23.48,0-5.66,0-11.33,0-17,0-.73.08-1.46.14-2.34h9.06a4.71,4.71,0,0,1,.24,1c0,13.91.3,27.84-.27,41.73-.62,15.18-10.06,24.51-25.16,25.35a43,43,0,0,1-14.27-1.4c-10.11-3-15.37-10.57-17-20.76a45.71,45.71,0,0,1-.56-7.21c-.05-12.16,0-24.33,0-36.49C936.85,23.61,936.85,23,936.85,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskS)"
d="M71.77,34.74c-6.56-3.74-13.5-5.86-21-5.1a28.51,28.51,0,0,0-8.16,2A8.81,8.81,0,0,0,37,40.08a7.85,7.85,0,0,0,5.36,7.71c4.31,1.7,8.84,2.84,13.29,4.19,3.18,1,6.42,1.75,9.55,2.86C73.87,57.91,78,63.15,78,71c0,8-4.61,14.68-12.93,17.35-12.91,4.16-25.29,2.42-37-4.46-1.85-1.09-2.65-2.26-1.27-4.35A36.43,36.43,0,0,0,29,75.05c.07-.13.24-.22.5-.45A36.06,36.06,0,0,0,44,81.23c5.87,1.15,11.74,1.4,17.49-.62,3.93-1.38,6.51-4,6.85-8.32s-2.18-7.17-5.92-8.58c-4.42-1.66-9-2.75-13.58-4.09-2.79-.83-5.61-1.56-8.36-2.51C31.62,54,27.42,48.69,27.39,40.65s4.74-14.82,13.1-17.52c11.2-3.62,22.16-2.49,32.73,2.67,1.54.75,2.12,1.6,1.24,3.29S73,32.45,72.31,34.14A5.75,5.75,0,0,1,71.77,34.74Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskF)"
d="M793.13,22.06c0,2.42,0,4.73,0,7,0,1.77-1.37,1.35-2.36,1.35q-16.24,0-32.48,0h-3.11V53.8h33.61v8.48H755.05V89.47h-9.56V22.06Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT2)" d="M895.3,30.5c-7.9,0-15.4,0-23.1,0c0-2.9,0-5.6,0-8.4c18.6,0,37.1,0,55.8,0c0,2.8,0,5.4,0,8.4
c-7.6,0-15.1,0-23,0c0,19.8,0,39.4,0,59.1c-3.3,0-6.4,0-9.7,0C895.3,70,895.3,50.4,895.3,30.5z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT)"
d="M532.76,30.45H509.64V22h55.77v8.35H542.46V89.47h-9.71C532.76,69.9,532.76,50.37,532.76,30.45Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskI)" d="M319.76,89.53H310.2V22.1h9.56Z" transform="translate(-26.12 -21.02)" />
</svg>
我在您的代码中添加了 [mask]{fill:white}，这意味着我用白色填充具有 mask 属性的路径。
[mask]{fill:white}
body {
background-color: red;
}
mask path {
fill: none;
stroke: white;
stroke-width: 20;
}
#maskH path,
#maskH2 path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 2s linear 1 forwards;
stroke-width: 19.5;
}
#maskI path,
#maskT path,
#maskT2 path,
#maskF path,
#maskU path,
#maskU2 path,
#maskE path,
#maskE2 path,
#maskG path,
#maskR path,
#maskS path,
#maskT2 path,
#maskA path,
#maskN path,
#maskP path,
#maskT path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 3s linear 1 forwards;
stroke-width: 19.5;
}
#maskT path {
stroke-width: 9.6;
}
#maskT2 path {
stroke-width: 9.8;
}
#maskA path {
stroke-width: 18;
}
#maskP path {
stroke-width: 19.4;
}
#maskN path {
stroke-width: 20;
}
@keyframes brush {
0% {
stroke-dashoffset: 500;
}
20% {
stroke-dashoffset: 500;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<svg height="300px" width="900px" id="FlorianCargouet" data-name="byflo-io" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1107.2 69.56">
<mask id="maskS">
<path d="M73.9,30.26c-16.7-8.75-32.61-7.37-38.23,0.48c-3.28,4.58-4.06,12.76-0.44,17.78c1.5,2.07,3.31,3.01,13.03,6.19
c16.47,5.39,20.71,5.81,23.08,10.01c2.02,3.6,1.68,8.22,0.18,11.47c-1.89,4.08-5.57,5.92-7.45,6.85
c-12.88,6.41-34.08-3.11-36.75-4.34" />
</mask>
<mask id="maskH">
<path d="M92.2,22.2 92.2,89.5 92.2,16.5 150.2,16.5 150.2,89.5 90.6,81.4 90.6,54.8 153.2,54.8 " />
</mask>
<mask id="maskA">
<path d="M160.4,89.6 189.9,23.8 200.8,23.8 231.2,89.6 226.1,67.1 172.7,67.4 " />
</mask>
<mask id="maskP">
<path
d="M241.4,21.9 241.4,89.5 228.7,22.1 275.5,22.6 281.6,24 286.2,26.4 290.6,30.2 293.3,34 295.5,39.9
296.1,45.3 296,48.4 295.3,51.9 294,55.6 292.1,59 289.6,61.8 286.2,64.5 281.9,66.8 277.5,68 272,68.8 251.1,69.1 " />
</mask>
<mask id="maskI">
<path d="M315,22.1 315,55.8 315,89.5 " />
</mask>
<mask id="maskN">
<path d="M340.2,89.4 340.2,21.9 350,39.5 389.5,88.5 391.1,89.6 398.3,89.6 398.3,22.1 388.4,22.1 347.3,22 " />
</mask>
<mask id="maskT">
<path d="M537.5,22.1 537.5,89.5 497.3,26.5 565.4,26.5 " />
</mask>
<mask id="maskT2">
<path d="M900.3,22.1 900.3,90.2 863.5,26.3 929.1,26.3 " />
</mask>
<mask id="maskH2">
<!-- <path d="M576.1,22.1 576.1,89.5 563.7,55.8 622.1,54.7 605.2,53.1 605.2,14.3 629.6,14.3 629.6,89.5 " /> -->
<path d="M576.1,22.1c0,22.5,0,44.9,0,67.4V12.2h58.1v77.3l-61.9-8.4V54.8h64.5" />
</mask>
<mask id="maskF">
<path d="M794.4,22.1 745.4,22.1 745.4,89.5 741.7,53.8 788.7,53.8 " />
</mask>
<mask id="maskU">
<path d="M806,22c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskU2">
<path d="M936.5,21.8c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskE">
<path d="M702.2,22.1 654.6,22.1 654.6,89.5 703.6,89.5 650,89.5 664.4,59.4 698,59.4 " />
</mask>
<mask id="maskE2">
<path d="M1131.9,22.1 1084.3,22.1 1084.3,89.5 1133.3,89.5 1079.7,89.5 1094.1,59.4 1127.7,59.4 " />
</mask>
<mask id="maskG">
<path d="M475.4,31.4c-1.1-1.1-2.6-2.5-4.7-4c-6.6-4.7-13.2-5.7-15.9-6.1c-2.5-0.4-8.8-1-16.4,1.2
c-3.1,0.9-9.3,2.8-15.1,8.3c-1.5,1.4-4.6,4.6-7.1,9.7c-0.7,1.4-2.2,4.9-3,9.7c-1.2,7.6,0.4,13.7,1.1,15.9c1.7,5.5,4.4,9.2,5.8,11.1
c2,2.5,5.4,6.2,10.8,9.1c6.6,3.5,12.6,3.9,16.2,4.1c8.1,0.4,14.2-1.6,16.1-2.3c7-2.5,9.2-3.6,10.3-5.5c0.9-1.6,1.1-3.1,1.2-5.3
c0.3-4.7,0.3-7.9,0-15.6c-0.2-3.8-0.2-4.2-0.2-6.2c0-2.6,0.1-4.7,0.2-6.1" />
</mask>
<mask id="maskR">
<path d="M1014.1,21.4l0,68l-1-59.2c11.7,0.4,19.8,0.6,24.6,0.4c0,0,3.9-0.2,9.9,0.8c0.9,0.1,2.2,0.4,3.7,1.1
c0.8,0.4,2.7,1.4,4.3,3.4c2.3,2.8,2.8,5.8,3,7.4c0.6,4.3-0.6,7.8-1.4,9.4l-1.2,2l-2.6,2.6l-12.4,3.3l-17.2,0.1l20.5,8.5l0.6,0.4
l0.8,0.9l12.2,17.3l1.2,1.3l1.6,0.4l2.8,0l6.3,0" />
</mask>
<path mask="url(#maskN)"
d="M340.18,21.91c2.5,0,4.84-.15,7.13.08.8.08,1.64,1,2.23,1.71q18.6,23,37.15,46.13c.41.51.87,1,1.73,2V22.1h9.85V89.63c-2.4,0-4.8.15-7.15-.08-.8-.08-1.64-1-2.23-1.73q-18.28-22.65-36.51-45.36l-2.41-3V89.43h-9.78C340.18,67.07,340.18,44.71,340.18,21.91Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskR)"
d="M1014.06,21.39c12.23.53,24.39-.18,36.08,1.83,20.18,3.47,22,24.38,14.8,35.43-2.6,4-6.38,6.48-11.1,8.3l7.92,11.25,8,11.44c-3.64,0-6.75.08-9.86-.07-.63,0-1.37-.81-1.81-1.42-4.16-5.83-8.24-11.71-12.4-17.53-.48-.67-1.32-1.52-2-1.54-6.56-.12-13.12-.07-20-.07V89.52h-9.68C1014.06,67.05,1014.06,44.63,1014.06,21.39Zm9.84,8.78V60.7c4.79,0,9.36.08,13.92,0A59.93,59.93,0,0,0,1047,60c7.5-1.37,11.87-6.83,11.85-14.43s-4.28-13.37-11.89-14.29S1031.75,30.49,1023.9,30.17Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH)" d="M150.16,89.53h-9.67V59.69H102V89.44H92.1V22.11h9.68V50.85h38.54V22.1h9.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH2)" d="M634.23,89.53h-9.68V59.69h-38.7V89.51h-9.7V22.06h9.62V50.79H624.4V22.08h9.83Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE)" d="M702.29,22.12V30.4H664.46V50.93H698v8.49H664.46V81h39.08v8.54H654.6V22.11Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE2)" d="M1084.35,89.46V22.07h47.55v8.27h-37.76V51h33.62v8.36h-33.59V81h39.15v8.42Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskG)"
d="M465.42,55.44h9.21a8,8,0,0,1,.28,1.48c0,7.75.09,15.49-.07,23.24A4.61,4.61,0,0,1,473,83.28a40.36,40.36,0,0,1-22.76,7.15c-12,.16-22.33-3.62-29.91-13.24C405.43,58.32,413.55,27.36,440.8,22c10.94-2.15,21.4-.92,30.67,5.93,1.38,1,2.6,2.27,4,3.49l-6.23,5.92a28.06,28.06,0,0,0-14.08-7c-15.81-2.43-28.82,5.55-31.8,20.19C419.92,67.37,432.5,82,450.13,81.63a32.28,32.28,0,0,0,13.05-2.9,3.35,3.35,0,0,0,2.29-3.58C465.35,68.68,465.42,62.2,465.42,55.44Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskP)"
d="M241.44,21.9c3.73,0,7.3-.06,10.86,0,7.74.16,15.54-.16,23.2.72,10.68,1.23,18,8,19.95,17.26,3.12,14.61-5.19,26.62-20.36,28.58-6.57.85-13.3.49-19.95.67-1.24,0-2.48,0-4.06,0V89.49h-9.64Zm9.76,8.28V60.45c6.85,0,13.51.18,20.16-.07a16,16,0,0,0,10.12-3.76c4.9-4.31,5.55-9.85,4.06-15.77s-5.88-9-11.5-9.64C266.54,30.4,259,30.49,251.2,30.18Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskA)"
d="M231.22,89.64c-3.31,0-6.14.12-8.95-.08a3.11,3.11,0,0,1-2-1.71c-2-4.37-4-8.78-5.84-13.24a2.73,2.73,0,0,0-3-1.93c-10.5.07-21,.1-31.49,0-1.85,0-2.62.71-3.27,2.28-1.78,4.3-3.79,8.51-5.55,12.82a2.62,2.62,0,0,1-3,1.89c-2.49-.13-5,0-7.75,0,.26-.81.4-1.42.65-2Q175.52,55.71,190,23.77c.65-1.43,1.55-1.69,3-1.95,5.88-1,8.57,1.55,10.89,6.93,8.38,19.48,17.39,38.69,26.16,58C230.37,87.57,230.7,88.4,231.22,89.64Zm-21.1-24.8L195.65,32,181.21,64.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU)"
d="M806,22h9.9v3.27c0,11.58-.08,23.15,0,34.73a42.2,42.2,0,0,0,1.13,9.37c1.21,5,4.14,8.92,9.15,10.77a23.2,23.2,0,0,0,17.3-.1c8.29-3.42,10.18-10.7,10.3-18.62.19-12.16,0-24.32.06-36.48V22.07h9.43c0,.9.12,1.71.12,2.52,0,12.41.18,24.82-.1,37.22a41.8,41.8,0,0,1-2.22,12.44c-2.64,7.64-8.24,12.58-16,14.8a37.77,37.77,0,0,1-19.74.25c-11-2.76-18.3-11.41-18.88-23.58-.63-13.13-.34-26.3-.45-39.46C806,25,806,23.64,806,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU2)"
d="M936.85,22h9.74v2.8c0,11.91-.06,23.83,0,35.74,0,5.2.68,10.38,4,14.67A13.86,13.86,0,0,0,955,79.16c7.25,3.64,14.65,3.67,21.72-.37,5.24-3,7.23-8.26,7.54-13.92.43-7.81.33-15.65.39-23.48,0-5.66,0-11.33,0-17,0-.73.08-1.46.14-2.34h9.06a4.71,4.71,0,0,1,.24,1c0,13.91.3,27.84-.27,41.73-.62,15.18-10.06,24.51-25.16,25.35a43,43,0,0,1-14.27-1.4c-10.11-3-15.37-10.57-17-20.76a45.71,45.71,0,0,1-.56-7.21c-.05-12.16,0-24.33,0-36.49C936.85,23.61,936.85,23,936.85,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskS)"
d="M71.77,34.74c-6.56-3.74-13.5-5.86-21-5.1a28.51,28.51,0,0,0-8.16,2A8.81,8.81,0,0,0,37,40.08a7.85,7.85,0,0,0,5.36,7.71c4.31,1.7,8.84,2.84,13.29,4.19,3.18,1,6.42,1.75,9.55,2.86C73.87,57.91,78,63.15,78,71c0,8-4.61,14.68-12.93,17.35-12.91,4.16-25.29,2.42-37-4.46-1.85-1.09-2.65-2.26-1.27-4.35A36.43,36.43,0,0,0,29,75.05c.07-.13.24-.22.5-.45A36.06,36.06,0,0,0,44,81.23c5.87,1.15,11.74,1.4,17.49-.62,3.93-1.38,6.51-4,6.85-8.32s-2.18-7.17-5.92-8.58c-4.42-1.66-9-2.75-13.58-4.09-2.79-.83-5.61-1.56-8.36-2.51C31.62,54,27.42,48.69,27.39,40.65s4.74-14.82,13.1-17.52c11.2-3.62,22.16-2.49,32.73,2.67,1.54.75,2.12,1.6,1.24,3.29S73,32.45,72.31,34.14A5.75,5.75,0,0,1,71.77,34.74Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskF)"
d="M793.13,22.06c0,2.42,0,4.73,0,7,0,1.77-1.37,1.35-2.36,1.35q-16.24,0-32.48,0h-3.11V53.8h33.61v8.48H755.05V89.47h-9.56V22.06Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT2)" d="M895.3,30.5c-7.9,0-15.4,0-23.1,0c0-2.9,0-5.6,0-8.4c18.6,0,37.1,0,55.8,0c0,2.8,0,5.4,0,8.4
c-7.6,0-15.1,0-23,0c0,19.8,0,39.4,0,59.1c-3.3,0-6.4,0-9.7,0C895.3,70,895.3,50.4,895.3,30.5z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT)"
d="M532.76,30.45H509.64V22h55.77v8.35H542.46V89.47h-9.71C532.76,69.9,532.76,50.37,532.76,30.45Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskI)" d="M319.76,89.53H310.2V22.1h9.56Z" transform="translate(-26.12 -21.02)" />
</svg>
我创建了一个动画文本，它适用于 SVG PATH 和 MASK。
问题是我不明白为什么我不能把它填成白色:/
我试过用fill属性或者stroke...毕竟我做了没有关系。很奇怪，你知道为什么它没有达到预期的颜色吗？
有人有解决方案或关于如何使它变白的想法吗？
body {
background-color: red;
}
mask path {
fill: none;
stroke: white;
stroke-width: 20;
}
#maskH path,
#maskH2 path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 2s linear 1 forwards;
stroke-width: 19.5;
}
#maskI path,
#maskT path,
#maskT2 path,
#maskF path,
#maskU path,
#maskU2 path,
#maskE path,
#maskE2 path,
#maskG path,
#maskR path,
#maskS path,
#maskT2 path,
#maskA path,
#maskN path,
#maskP path,
#maskT path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 3s linear 1 forwards;
stroke-width: 19.5;
}
#maskT path {
stroke-width: 9.6;
}
#maskT2 path {
stroke-width: 9.8;
}
#maskA path {
stroke-width: 18;
}
#maskP path {
stroke-width: 19.4;
}
#maskN path {
stroke-width: 20;
}
@keyframes brush {
0% {
stroke-dashoffset: 500;
}
20% {
stroke-dashoffset: 500;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<svg height="300px" width="900px" id="FlorianCargouet" data-name="byflo-io" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1107.2 69.56">
<mask id="maskS">
<path d="M73.9,30.26c-16.7-8.75-32.61-7.37-38.23,0.48c-3.28,4.58-4.06,12.76-0.44,17.78c1.5,2.07,3.31,3.01,13.03,6.19
c16.47,5.39,20.71,5.81,23.08,10.01c2.02,3.6,1.68,8.22,0.18,11.47c-1.89,4.08-5.57,5.92-7.45,6.85
c-12.88,6.41-34.08-3.11-36.75-4.34" />
</mask>
<mask id="maskH">
<path d="M92.2,22.2 92.2,89.5 92.2,16.5 150.2,16.5 150.2,89.5 90.6,81.4 90.6,54.8 153.2,54.8 " />
</mask>
<mask id="maskA">
<path d="M160.4,89.6 189.9,23.8 200.8,23.8 231.2,89.6 226.1,67.1 172.7,67.4 " />
</mask>
<mask id="maskP">
<path
d="M241.4,21.9 241.4,89.5 228.7,22.1 275.5,22.6 281.6,24 286.2,26.4 290.6,30.2 293.3,34 295.5,39.9
296.1,45.3 296,48.4 295.3,51.9 294,55.6 292.1,59 289.6,61.8 286.2,64.5 281.9,66.8 277.5,68 272,68.8 251.1,69.1 " />
</mask>
<mask id="maskI">
<path d="M315,22.1 315,55.8 315,89.5 " />
</mask>
<mask id="maskN">
<path d="M340.2,89.4 340.2,21.9 350,39.5 389.5,88.5 391.1,89.6 398.3,89.6 398.3,22.1 388.4,22.1 347.3,22 " />
</mask>
<mask id="maskT">
<path d="M537.5,22.1 537.5,89.5 497.3,26.5 565.4,26.5 " />
</mask>
<mask id="maskT2">
<path d="M900.3,22.1 900.3,90.2 863.5,26.3 929.1,26.3 " />
</mask>
<mask id="maskH2">
<!-- <path d="M576.1,22.1 576.1,89.5 563.7,55.8 622.1,54.7 605.2,53.1 605.2,14.3 629.6,14.3 629.6,89.5 " /> -->
<path d="M576.1,22.1c0,22.5,0,44.9,0,67.4V12.2h58.1v77.3l-61.9-8.4V54.8h64.5" />
</mask>
<mask id="maskF">
<path d="M794.4,22.1 745.4,22.1 745.4,89.5 741.7,53.8 788.7,53.8 " />
</mask>
<mask id="maskU">
<path d="M806,22c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskU2">
<path d="M936.5,21.8c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskE">
<path d="M702.2,22.1 654.6,22.1 654.6,89.5 703.6,89.5 650,89.5 664.4,59.4 698,59.4 " />
</mask>
<mask id="maskE2">
<path d="M1131.9,22.1 1084.3,22.1 1084.3,89.5 1133.3,89.5 1079.7,89.5 1094.1,59.4 1127.7,59.4 " />
</mask>
<mask id="maskG">
<path d="M475.4,31.4c-1.1-1.1-2.6-2.5-4.7-4c-6.6-4.7-13.2-5.7-15.9-6.1c-2.5-0.4-8.8-1-16.4,1.2
c-3.1,0.9-9.3,2.8-15.1,8.3c-1.5,1.4-4.6,4.6-7.1,9.7c-0.7,1.4-2.2,4.9-3,9.7c-1.2,7.6,0.4,13.7,1.1,15.9c1.7,5.5,4.4,9.2,5.8,11.1
c2,2.5,5.4,6.2,10.8,9.1c6.6,3.5,12.6,3.9,16.2,4.1c8.1,0.4,14.2-1.6,16.1-2.3c7-2.5,9.2-3.6,10.3-5.5c0.9-1.6,1.1-3.1,1.2-5.3
c0.3-4.7,0.3-7.9,0-15.6c-0.2-3.8-0.2-4.2-0.2-6.2c0-2.6,0.1-4.7,0.2-6.1" />
</mask>
<mask id="maskR">
<path d="M1014.1,21.4l0,68l-1-59.2c11.7,0.4,19.8,0.6,24.6,0.4c0,0,3.9-0.2,9.9,0.8c0.9,0.1,2.2,0.4,3.7,1.1
c0.8,0.4,2.7,1.4,4.3,3.4c2.3,2.8,2.8,5.8,3,7.4c0.6,4.3-0.6,7.8-1.4,9.4l-1.2,2l-2.6,2.6l-12.4,3.3l-17.2,0.1l20.5,8.5l0.6,0.4
l0.8,0.9l12.2,17.3l1.2,1.3l1.6,0.4l2.8,0l6.3,0" />
</mask>
<path mask="url(#maskN)"
d="M340.18,21.91c2.5,0,4.84-.15,7.13.08.8.08,1.64,1,2.23,1.71q18.6,23,37.15,46.13c.41.51.87,1,1.73,2V22.1h9.85V89.63c-2.4,0-4.8.15-7.15-.08-.8-.08-1.64-1-2.23-1.73q-18.28-22.65-36.51-45.36l-2.41-3V89.43h-9.78C340.18,67.07,340.18,44.71,340.18,21.91Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskR)"
d="M1014.06,21.39c12.23.53,24.39-.18,36.08,1.83,20.18,3.47,22,24.38,14.8,35.43-2.6,4-6.38,6.48-11.1,8.3l7.92,11.25,8,11.44c-3.64,0-6.75.08-9.86-.07-.63,0-1.37-.81-1.81-1.42-4.16-5.83-8.24-11.71-12.4-17.53-.48-.67-1.32-1.52-2-1.54-6.56-.12-13.12-.07-20-.07V89.52h-9.68C1014.06,67.05,1014.06,44.63,1014.06,21.39Zm9.84,8.78V60.7c4.79,0,9.36.08,13.92,0A59.93,59.93,0,0,0,1047,60c7.5-1.37,11.87-6.83,11.85-14.43s-4.28-13.37-11.89-14.29S1031.75,30.49,1023.9,30.17Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH)" d="M150.16,89.53h-9.67V59.69H102V89.44H92.1V22.11h9.68V50.85h38.54V22.1h9.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH2)" d="M634.23,89.53h-9.68V59.69h-38.7V89.51h-9.7V22.06h9.62V50.79H624.4V22.08h9.83Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE)" d="M702.29,22.12V30.4H664.46V50.93H698v8.49H664.46V81h39.08v8.54H654.6V22.11Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE2)" d="M1084.35,89.46V22.07h47.55v8.27h-37.76V51h33.62v8.36h-33.59V81h39.15v8.42Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskG)"
d="M465.42,55.44h9.21a8,8,0,0,1,.28,1.48c0,7.75.09,15.49-.07,23.24A4.61,4.61,0,0,1,473,83.28a40.36,40.36,0,0,1-22.76,7.15c-12,.16-22.33-3.62-29.91-13.24C405.43,58.32,413.55,27.36,440.8,22c10.94-2.15,21.4-.92,30.67,5.93,1.38,1,2.6,2.27,4,3.49l-6.23,5.92a28.06,28.06,0,0,0-14.08-7c-15.81-2.43-28.82,5.55-31.8,20.19C419.92,67.37,432.5,82,450.13,81.63a32.28,32.28,0,0,0,13.05-2.9,3.35,3.35,0,0,0,2.29-3.58C465.35,68.68,465.42,62.2,465.42,55.44Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskP)"
d="M241.44,21.9c3.73,0,7.3-.06,10.86,0,7.74.16,15.54-.16,23.2.72,10.68,1.23,18,8,19.95,17.26,3.12,14.61-5.19,26.62-20.36,28.58-6.57.85-13.3.49-19.95.67-1.24,0-2.48,0-4.06,0V89.49h-9.64Zm9.76,8.28V60.45c6.85,0,13.51.18,20.16-.07a16,16,0,0,0,10.12-3.76c4.9-4.31,5.55-9.85,4.06-15.77s-5.88-9-11.5-9.64C266.54,30.4,259,30.49,251.2,30.18Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskA)"
d="M231.22,89.64c-3.31,0-6.14.12-8.95-.08a3.11,3.11,0,0,1-2-1.71c-2-4.37-4-8.78-5.84-13.24a2.73,2.73,0,0,0-3-1.93c-10.5.07-21,.1-31.49,0-1.85,0-2.62.71-3.27,2.28-1.78,4.3-3.79,8.51-5.55,12.82a2.62,2.62,0,0,1-3,1.89c-2.49-.13-5,0-7.75,0,.26-.81.4-1.42.65-2Q175.52,55.71,190,23.77c.65-1.43,1.55-1.69,3-1.95,5.88-1,8.57,1.55,10.89,6.93,8.38,19.48,17.39,38.69,26.16,58C230.37,87.57,230.7,88.4,231.22,89.64Zm-21.1-24.8L195.65,32,181.21,64.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU)"
d="M806,22h9.9v3.27c0,11.58-.08,23.15,0,34.73a42.2,42.2,0,0,0,1.13,9.37c1.21,5,4.14,8.92,9.15,10.77a23.2,23.2,0,0,0,17.3-.1c8.29-3.42,10.18-10.7,10.3-18.62.19-12.16,0-24.32.06-36.48V22.07h9.43c0,.9.12,1.71.12,2.52,0,12.41.18,24.82-.1,37.22a41.8,41.8,0,0,1-2.22,12.44c-2.64,7.64-8.24,12.58-16,14.8a37.77,37.77,0,0,1-19.74.25c-11-2.76-18.3-11.41-18.88-23.58-.63-13.13-.34-26.3-.45-39.46C806,25,806,23.64,806,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU2)"
d="M936.85,22h9.74v2.8c0,11.91-.06,23.83,0,35.74,0,5.2.68,10.38,4,14.67A13.86,13.86,0,0,0,955,79.16c7.25,3.64,14.65,3.67,21.72-.37,5.24-3,7.23-8.26,7.54-13.92.43-7.81.33-15.65.39-23.48,0-5.66,0-11.33,0-17,0-.73.08-1.46.14-2.34h9.06a4.71,4.71,0,0,1,.24,1c0,13.91.3,27.84-.27,41.73-.62,15.18-10.06,24.51-25.16,25.35a43,43,0,0,1-14.27-1.4c-10.11-3-15.37-10.57-17-20.76a45.71,45.71,0,0,1-.56-7.21c-.05-12.16,0-24.33,0-36.49C936.85,23.61,936.85,23,936.85,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskS)"
d="M71.77,34.74c-6.56-3.74-13.5-5.86-21-5.1a28.51,28.51,0,0,0-8.16,2A8.81,8.81,0,0,0,37,40.08a7.85,7.85,0,0,0,5.36,7.71c4.31,1.7,8.84,2.84,13.29,4.19,3.18,1,6.42,1.75,9.55,2.86C73.87,57.91,78,63.15,78,71c0,8-4.61,14.68-12.93,17.35-12.91,4.16-25.29,2.42-37-4.46-1.85-1.09-2.65-2.26-1.27-4.35A36.43,36.43,0,0,0,29,75.05c.07-.13.24-.22.5-.45A36.06,36.06,0,0,0,44,81.23c5.87,1.15,11.74,1.4,17.49-.62,3.93-1.38,6.51-4,6.85-8.32s-2.18-7.17-5.92-8.58c-4.42-1.66-9-2.75-13.58-4.09-2.79-.83-5.61-1.56-8.36-2.51C31.62,54,27.42,48.69,27.39,40.65s4.74-14.82,13.1-17.52c11.2-3.62,22.16-2.49,32.73,2.67,1.54.75,2.12,1.6,1.24,3.29S73,32.45,72.31,34.14A5.75,5.75,0,0,1,71.77,34.74Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskF)"
d="M793.13,22.06c0,2.42,0,4.73,0,7,0,1.77-1.37,1.35-2.36,1.35q-16.24,0-32.48,0h-3.11V53.8h33.61v8.48H755.05V89.47h-9.56V22.06Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT2)" d="M895.3,30.5c-7.9,0-15.4,0-23.1,0c0-2.9,0-5.6,0-8.4c18.6,0,37.1,0,55.8,0c0,2.8,0,5.4,0,8.4
c-7.6,0-15.1,0-23,0c0,19.8,0,39.4,0,59.1c-3.3,0-6.4,0-9.7,0C895.3,70,895.3,50.4,895.3,30.5z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT)"
d="M532.76,30.45H509.64V22h55.77v8.35H542.46V89.47h-9.71C532.76,69.9,532.76,50.37,532.76,30.45Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskI)" d="M319.76,89.53H310.2V22.1h9.56Z" transform="translate(-26.12 -21.02)" />
</svg>
我在您的代码中添加了 [mask]{fill:white}，这意味着我用白色填充具有 mask 属性的路径。
[mask]{fill:white}
body {
background-color: red;
}
mask path {
fill: none;
stroke: white;
stroke-width: 20;
}
#maskH path,
#maskH2 path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 2s linear 1 forwards;
stroke-width: 19.5;
}
#maskI path,
#maskT path,
#maskT2 path,
#maskF path,
#maskU path,
#maskU2 path,
#maskE path,
#maskE2 path,
#maskG path,
#maskR path,
#maskS path,
#maskT2 path,
#maskA path,
#maskN path,
#maskP path,
#maskT path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: brush 3s linear 1 forwards;
stroke-width: 19.5;
}
#maskT path {
stroke-width: 9.6;
}
#maskT2 path {
stroke-width: 9.8;
}
#maskA path {
stroke-width: 18;
}
#maskP path {
stroke-width: 19.4;
}
#maskN path {
stroke-width: 20;
}
@keyframes brush {
0% {
stroke-dashoffset: 500;
}
20% {
stroke-dashoffset: 500;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<svg height="300px" width="900px" id="FlorianCargouet" data-name="byflo-io" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1107.2 69.56">
<mask id="maskS">
<path d="M73.9,30.26c-16.7-8.75-32.61-7.37-38.23,0.48c-3.28,4.58-4.06,12.76-0.44,17.78c1.5,2.07,3.31,3.01,13.03,6.19
c16.47,5.39,20.71,5.81,23.08,10.01c2.02,3.6,1.68,8.22,0.18,11.47c-1.89,4.08-5.57,5.92-7.45,6.85
c-12.88,6.41-34.08-3.11-36.75-4.34" />
</mask>
<mask id="maskH">
<path d="M92.2,22.2 92.2,89.5 92.2,16.5 150.2,16.5 150.2,89.5 90.6,81.4 90.6,54.8 153.2,54.8 " />
</mask>
<mask id="maskA">
<path d="M160.4,89.6 189.9,23.8 200.8,23.8 231.2,89.6 226.1,67.1 172.7,67.4 " />
</mask>
<mask id="maskP">
<path
d="M241.4,21.9 241.4,89.5 228.7,22.1 275.5,22.6 281.6,24 286.2,26.4 290.6,30.2 293.3,34 295.5,39.9
296.1,45.3 296,48.4 295.3,51.9 294,55.6 292.1,59 289.6,61.8 286.2,64.5 281.9,66.8 277.5,68 272,68.8 251.1,69.1 " />
</mask>
<mask id="maskI">
<path d="M315,22.1 315,55.8 315,89.5 " />
</mask>
<mask id="maskN">
<path d="M340.2,89.4 340.2,21.9 350,39.5 389.5,88.5 391.1,89.6 398.3,89.6 398.3,22.1 388.4,22.1 347.3,22 " />
</mask>
<mask id="maskT">
<path d="M537.5,22.1 537.5,89.5 497.3,26.5 565.4,26.5 " />
</mask>
<mask id="maskT2">
<path d="M900.3,22.1 900.3,90.2 863.5,26.3 929.1,26.3 " />
</mask>
<mask id="maskH2">
<!-- <path d="M576.1,22.1 576.1,89.5 563.7,55.8 622.1,54.7 605.2,53.1 605.2,14.3 629.6,14.3 629.6,89.5 " /> -->
<path d="M576.1,22.1c0,22.5,0,44.9,0,67.4V12.2h58.1v77.3l-61.9-8.4V54.8h64.5" />
</mask>
<mask id="maskF">
<path d="M794.4,22.1 745.4,22.1 745.4,89.5 741.7,53.8 788.7,53.8 " />
</mask>
<mask id="maskU">
<path d="M806,22c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskU2">
<path d="M936.5,21.8c0.2,21.2,0.4,36.3,0.4,40.4c0,0.4,0,1.8,0.2,3.7c0.2,1.9,0.4,4.4,1.5,7.4c0.8,2.2,1.7,3.8,2,4.3
c0.9,1.6,1.8,2.7,2.4,3.4c0.6,0.8,1.9,2.2,3.8,3.6c0.5,0.4,2.2,1.6,4.7,2.8c3.1,1.4,5.8,1.9,7.6,2.2c1.5,0.3,5,0.8,9.4,0.4
c3.6-0.3,6.1-1,6.7-1.2c1.7-0.5,4.1-1.2,6.8-2.8c2.3-1.4,3.7-2.8,4.2-3.2c0.6-0.5,2.3-2.4,3.9-5.3c0.3-0.5,1.4-2.6,2.4-6.4
c0.8-3.2,1.2-6,1.4-9.7c0.4-6.6,0.2-11.5,0.2-11.5c-0.3-5.4-0.4-14-0.2-28.2" />
</mask>
<mask id="maskE">
<path d="M702.2,22.1 654.6,22.1 654.6,89.5 703.6,89.5 650,89.5 664.4,59.4 698,59.4 " />
</mask>
<mask id="maskE2">
<path d="M1131.9,22.1 1084.3,22.1 1084.3,89.5 1133.3,89.5 1079.7,89.5 1094.1,59.4 1127.7,59.4 " />
</mask>
<mask id="maskG">
<path d="M475.4,31.4c-1.1-1.1-2.6-2.5-4.7-4c-6.6-4.7-13.2-5.7-15.9-6.1c-2.5-0.4-8.8-1-16.4,1.2
c-3.1,0.9-9.3,2.8-15.1,8.3c-1.5,1.4-4.6,4.6-7.1,9.7c-0.7,1.4-2.2,4.9-3,9.7c-1.2,7.6,0.4,13.7,1.1,15.9c1.7,5.5,4.4,9.2,5.8,11.1
c2,2.5,5.4,6.2,10.8,9.1c6.6,3.5,12.6,3.9,16.2,4.1c8.1,0.4,14.2-1.6,16.1-2.3c7-2.5,9.2-3.6,10.3-5.5c0.9-1.6,1.1-3.1,1.2-5.3
c0.3-4.7,0.3-7.9,0-15.6c-0.2-3.8-0.2-4.2-0.2-6.2c0-2.6,0.1-4.7,0.2-6.1" />
</mask>
<mask id="maskR">
<path d="M1014.1,21.4l0,68l-1-59.2c11.7,0.4,19.8,0.6,24.6,0.4c0,0,3.9-0.2,9.9,0.8c0.9,0.1,2.2,0.4,3.7,1.1
c0.8,0.4,2.7,1.4,4.3,3.4c2.3,2.8,2.8,5.8,3,7.4c0.6,4.3-0.6,7.8-1.4,9.4l-1.2,2l-2.6,2.6l-12.4,3.3l-17.2,0.1l20.5,8.5l0.6,0.4
l0.8,0.9l12.2,17.3l1.2,1.3l1.6,0.4l2.8,0l6.3,0" />
</mask>
<path mask="url(#maskN)"
d="M340.18,21.91c2.5,0,4.84-.15,7.13.08.8.08,1.64,1,2.23,1.71q18.6,23,37.15,46.13c.41.51.87,1,1.73,2V22.1h9.85V89.63c-2.4,0-4.8.15-7.15-.08-.8-.08-1.64-1-2.23-1.73q-18.28-22.65-36.51-45.36l-2.41-3V89.43h-9.78C340.18,67.07,340.18,44.71,340.18,21.91Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskR)"
d="M1014.06,21.39c12.23.53,24.39-.18,36.08,1.83,20.18,3.47,22,24.38,14.8,35.43-2.6,4-6.38,6.48-11.1,8.3l7.92,11.25,8,11.44c-3.64,0-6.75.08-9.86-.07-.63,0-1.37-.81-1.81-1.42-4.16-5.83-8.24-11.71-12.4-17.53-.48-.67-1.32-1.52-2-1.54-6.56-.12-13.12-.07-20-.07V89.52h-9.68C1014.06,67.05,1014.06,44.63,1014.06,21.39Zm9.84,8.78V60.7c4.79,0,9.36.08,13.92,0A59.93,59.93,0,0,0,1047,60c7.5-1.37,11.87-6.83,11.85-14.43s-4.28-13.37-11.89-14.29S1031.75,30.49,1023.9,30.17Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH)" d="M150.16,89.53h-9.67V59.69H102V89.44H92.1V22.11h9.68V50.85h38.54V22.1h9.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskH2)" d="M634.23,89.53h-9.68V59.69h-38.7V89.51h-9.7V22.06h9.62V50.79H624.4V22.08h9.83Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE)" d="M702.29,22.12V30.4H664.46V50.93H698v8.49H664.46V81h39.08v8.54H654.6V22.11Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskE2)" d="M1084.35,89.46V22.07h47.55v8.27h-37.76V51h33.62v8.36h-33.59V81h39.15v8.42Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskG)"
d="M465.42,55.44h9.21a8,8,0,0,1,.28,1.48c0,7.75.09,15.49-.07,23.24A4.61,4.61,0,0,1,473,83.28a40.36,40.36,0,0,1-22.76,7.15c-12,.16-22.33-3.62-29.91-13.24C405.43,58.32,413.55,27.36,440.8,22c10.94-2.15,21.4-.92,30.67,5.93,1.38,1,2.6,2.27,4,3.49l-6.23,5.92a28.06,28.06,0,0,0-14.08-7c-15.81-2.43-28.82,5.55-31.8,20.19C419.92,67.37,432.5,82,450.13,81.63a32.28,32.28,0,0,0,13.05-2.9,3.35,3.35,0,0,0,2.29-3.58C465.35,68.68,465.42,62.2,465.42,55.44Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskP)"
d="M241.44,21.9c3.73,0,7.3-.06,10.86,0,7.74.16,15.54-.16,23.2.72,10.68,1.23,18,8,19.95,17.26,3.12,14.61-5.19,26.62-20.36,28.58-6.57.85-13.3.49-19.95.67-1.24,0-2.48,0-4.06,0V89.49h-9.64Zm9.76,8.28V60.45c6.85,0,13.51.18,20.16-.07a16,16,0,0,0,10.12-3.76c4.9-4.31,5.55-9.85,4.06-15.77s-5.88-9-11.5-9.64C266.54,30.4,259,30.49,251.2,30.18Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskA)"
d="M231.22,89.64c-3.31,0-6.14.12-8.95-.08a3.11,3.11,0,0,1-2-1.71c-2-4.37-4-8.78-5.84-13.24a2.73,2.73,0,0,0-3-1.93c-10.5.07-21,.1-31.49,0-1.85,0-2.62.71-3.27,2.28-1.78,4.3-3.79,8.51-5.55,12.82a2.62,2.62,0,0,1-3,1.89c-2.49-.13-5,0-7.75,0,.26-.81.4-1.42.65-2Q175.52,55.71,190,23.77c.65-1.43,1.55-1.69,3-1.95,5.88-1,8.57,1.55,10.89,6.93,8.38,19.48,17.39,38.69,26.16,58C230.37,87.57,230.7,88.4,231.22,89.64Zm-21.1-24.8L195.65,32,181.21,64.84Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU)"
d="M806,22h9.9v3.27c0,11.58-.08,23.15,0,34.73a42.2,42.2,0,0,0,1.13,9.37c1.21,5,4.14,8.92,9.15,10.77a23.2,23.2,0,0,0,17.3-.1c8.29-3.42,10.18-10.7,10.3-18.62.19-12.16,0-24.32.06-36.48V22.07h9.43c0,.9.12,1.71.12,2.52,0,12.41.18,24.82-.1,37.22a41.8,41.8,0,0,1-2.22,12.44c-2.64,7.64-8.24,12.58-16,14.8a37.77,37.77,0,0,1-19.74.25c-11-2.76-18.3-11.41-18.88-23.58-.63-13.13-.34-26.3-.45-39.46C806,25,806,23.64,806,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskU2)"
d="M936.85,22h9.74v2.8c0,11.91-.06,23.83,0,35.74,0,5.2.68,10.38,4,14.67A13.86,13.86,0,0,0,955,79.16c7.25,3.64,14.65,3.67,21.72-.37,5.24-3,7.23-8.26,7.54-13.92.43-7.81.33-15.65.39-23.48,0-5.66,0-11.33,0-17,0-.73.08-1.46.14-2.34h9.06a4.71,4.71,0,0,1,.24,1c0,13.91.3,27.84-.27,41.73-.62,15.18-10.06,24.51-25.16,25.35a43,43,0,0,1-14.27-1.4c-10.11-3-15.37-10.57-17-20.76a45.71,45.71,0,0,1-.56-7.21c-.05-12.16,0-24.33,0-36.49C936.85,23.61,936.85,23,936.85,22Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskS)"
d="M71.77,34.74c-6.56-3.74-13.5-5.86-21-5.1a28.51,28.51,0,0,0-8.16,2A8.81,8.81,0,0,0,37,40.08a7.85,7.85,0,0,0,5.36,7.71c4.31,1.7,8.84,2.84,13.29,4.19,3.18,1,6.42,1.75,9.55,2.86C73.87,57.91,78,63.15,78,71c0,8-4.61,14.68-12.93,17.35-12.91,4.16-25.29,2.42-37-4.46-1.85-1.09-2.65-2.26-1.27-4.35A36.43,36.43,0,0,0,29,75.05c.07-.13.24-.22.5-.45A36.06,36.06,0,0,0,44,81.23c5.87,1.15,11.74,1.4,17.49-.62,3.93-1.38,6.51-4,6.85-8.32s-2.18-7.17-5.92-8.58c-4.42-1.66-9-2.75-13.58-4.09-2.79-.83-5.61-1.56-8.36-2.51C31.62,54,27.42,48.69,27.39,40.65s4.74-14.82,13.1-17.52c11.2-3.62,22.16-2.49,32.73,2.67,1.54.75,2.12,1.6,1.24,3.29S73,32.45,72.31,34.14A5.75,5.75,0,0,1,71.77,34.74Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskF)"
d="M793.13,22.06c0,2.42,0,4.73,0,7,0,1.77-1.37,1.35-2.36,1.35q-16.24,0-32.48,0h-3.11V53.8h33.61v8.48H755.05V89.47h-9.56V22.06Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT2)" d="M895.3,30.5c-7.9,0-15.4,0-23.1,0c0-2.9,0-5.6,0-8.4c18.6,0,37.1,0,55.8,0c0,2.8,0,5.4,0,8.4
c-7.6,0-15.1,0-23,0c0,19.8,0,39.4,0,59.1c-3.3,0-6.4,0-9.7,0C895.3,70,895.3,50.4,895.3,30.5z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskT)"
d="M532.76,30.45H509.64V22h55.77v8.35H542.46V89.47h-9.71C532.76,69.9,532.76,50.37,532.76,30.45Z"
transform="translate(-26.12 -21.02)" />
<path mask="url(#maskI)" d="M319.76,89.53H310.2V22.1h9.56Z" transform="translate(-26.12 -21.02)" />
</svg>