好的，所以…
我的SVG文本动画有另一个问题。我为文本创建了一个笔划动画，但我也想在动画之后填充它。为此，我写了这样的代码：(目前只在全屏模式下工作(
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
height: 100%;
width: 100%;
background-color: #F2BA00;
stroke-linecap: round;
}
#animateTop
{
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
}
#animateBar
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#animateBottom
{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes lineanim
{
to
{
stroke-dashoffset: 0;
}
}
@keyframes fillOne
{
from
{
fill: transparent;
}
to
{
fill: #A3A3A3;
}
}
@keyframes fillTwo
{
from
{
fill: transparent;
}
to
{
fill: #808080;
}
}
#animateTop
{
animation: fillOne 0.5s ease-in-out 10.5s forwards;
}
#animateBar, #animateBottom
{
animation: fillTwo 0.5s ease-in-out 10.5s forwards;
}
#animateTop path:nth-child(2)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 0.5s forwards;
}
#animateTop path:nth-child(3)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 1s forwards;
}
#animateTop path:nth-child(4)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 1.5s forwards;
}
#animateTop path:nth-child(5)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 2s forwards;
}
#animateTop path:nth-child(6)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 2.5s forwards;
}
#animateTop path:nth-child(7)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 3s forwards;
}
#animateTop path:nth-child(8)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 3.5s forwards;
}
#animateTop path:nth-child(9)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 4s forwards;
}
#animateTop path:nth-child(10)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 4.5s forwards;
}
#animateTop path:nth-child(11)
{
stroke-dasharray: 850px;
stroke-dashoffset: 850px;
animation: lineanim 1.5s ease-in-out 5s forwards;
}
#animateBar path:nth-child(1)
{
stroke-dasharray: 1491px;
stroke-dashoffset: 1491px;
animation: lineanim 1.5s ease-in-out 5.5s forwards;
}
#animateBottom path:nth-child(2)
{
stroke-dasharray: 448px;
stroke-dashoffset: 448px;
animation: lineanim 1.5s ease-in-out 6.5s forwards;
}
#animateBottom path:nth-child(3)
{
stroke-dasharray: 448px;
stroke-dashoffset: 448px;
animation: lineanim 1.5s ease-in-out 7s forwards;
}
#animateBottom path:nth-child(4)
{
stroke-dasharray: 448px;
stroke-dashoffset: 448px;
animation: lineanim 1.5s ease-in-out 7.5s forwards;
}
#animateBottom path:nth-child(5)
{
stroke-dasharray: 448px;
stroke-dashoffset: 448px;
animation: lineanim 1.5s ease-in-out 8s forwards;
}
#animateBottom path:nth-child(6)
{
stroke-dasharray: 448px;
stroke-dashoffset: 448px;
animation: lineanim 1.5s ease-in-out 8.5s forwards;
}
#animateBottom path:nth-child(7)
{
stroke-dasharray: 448px;
stroke-dashoffset: 448px;
animation: lineanim 1.5s ease-in-out 9s forwards;
}<svg id="animateTop" width="855" height="99" viewBox="0 0 855 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1_1_13" maskUnits="userSpaceOnUse" x="0" y="0" width="855" height="99" fill="black">
<rect fill="white" width="855" height="99"/>
<path d="M33.375 6.125C42.625 6.125 50.7083 7.91667 57.625 11.5C64.625 15 70 20.0833 73.75 26.75C77.5833 33.3333 79.5 41.0417 79.5 49.875C79.5 58.7083 77.5833 66.375 73.75 72.875C70 79.375 64.625 84.375 57.625 87.875C50.7083 91.2917 42.625 93 33.375 93H5V6.125H33.375ZM33.375 81.375C43.5417 81.375 51.3333 78.625 56.75 73.125C62.1667 67.625 64.875 59.875 64.875 49.875C64.875 39.7917 62.1667 31.9167 56.75 26.25C51.3333 20.5833 43.5417 17.75 33.375 17.75H19.25V81.375H33.375Z"/>
<path d="M114.123 17.625V43.125H144.123V54.75H114.123V81.375H147.873V93H99.873V6H147.873V17.625H114.123Z"/>
<path d="M200.3 93.875C194.466 93.875 189.216 92.875 184.55 90.875C179.883 88.7917 176.216 85.875 173.55 82.125C170.883 78.375 169.55 74 169.55 69H184.8C185.133 72.75 186.591 75.8333 189.175 78.25C191.841 80.6667 195.55 81.875 200.3 81.875C205.216 81.875 209.05 80.7083 211.8 78.375C214.55 75.9583 215.925 72.875 215.925 69.125C215.925 66.2083 215.05 63.8333 213.3 62C211.633 60.1667 209.508 58.75 206.925 57.75C204.425 56.75 200.925 55.6667 196.425 54.5C190.758 53 186.133 51.5 182.55 50C179.05 48.4167 176.05 46 173.55 42.75C171.05 39.5 169.8 35.1667 169.8 29.75C169.8 24.75 171.05 20.375 173.55 16.625C176.05 12.875 179.55 10 184.05 8.00001C188.55 6 193.758 5 199.675 5C208.091 5 214.966 7.125 220.3 11.375C225.716 15.5417 228.716 21.2917 229.3 28.625H213.55C213.3 25.4583 211.8 22.75 209.05 20.5C206.3 18.25 202.675 17.125 198.175 17.125C194.091 17.125 190.758 18.1667 188.175 20.25C185.591 22.3333 184.3 25.3333 184.3 29.25C184.3 31.9167 185.091 34.125 186.675 35.875C188.341 37.5417 190.425 38.875 192.925 39.875C195.425 40.875 198.841 41.9583 203.175 43.125C208.925 44.7083 213.591 46.2917 217.175 47.875C220.841 49.4583 223.925 51.9167 226.425 55.25C229.008 58.5 230.3 62.875 230.3 68.375C230.3 72.7917 229.091 76.9583 226.675 80.875C224.341 84.7917 220.883 87.9583 216.3 90.375C211.8 92.7083 206.466 93.875 200.3 93.875Z"/>
<path d="M267.614 6.125V93H253.364V6.125H267.614Z"/>
<path d="M355.448 31.125C353.198 26.7917 350.073 23.5417 346.073 21.375C342.073 19.125 337.448 18 332.198 18C326.448 18 321.323 19.2917 316.823 21.875C312.323 24.4583 308.782 28.125 306.198 32.875C303.698 37.625 302.448 43.125 302.448 49.375C302.448 55.625 303.698 61.1667 306.198 66C308.782 70.75 312.323 74.4167 316.823 77C321.323 79.5833 326.448 80.875 332.198 80.875C339.948 80.875 346.24 78.7083 351.073 74.375C355.907 70.0417 358.865 64.1667 359.948 56.75H327.323V45.375H375.198V56.5C374.282 63.25 371.865 69.4583 367.948 75.125C364.115 80.7917 359.073 85.3333 352.823 88.75C346.657 92.0833 339.782 93.75 332.198 93.75C324.032 93.75 316.573 91.875 309.823 88.125C303.073 84.2917 297.698 79 293.698 72.25C289.782 65.5 287.823 57.875 287.823 49.375C287.823 40.875 289.782 33.25 293.698 26.5C297.698 19.75 303.073 14.5 309.823 10.75C316.657 6.91667 324.115 5 332.198 5C341.448 5 349.657 7.29167 356.823 11.875C364.073 16.375 369.323 22.7917 372.573 31.125H355.448Z"/>
<path d="M466.878 93H452.628L409.753 28.125V93H395.503V6H409.753L452.628 70.75V6H466.878V93Z"/>
<path d="M506.091 17.625V43.125H536.091V54.75H506.091V81.375H539.841V93H491.841V6H539.841V17.625H506.091Z"/>
<path d="M592.018 6.125C601.268 6.125 609.351 7.91667 616.268 11.5C623.268 15 628.643 20.0833 632.393 26.75C636.226 33.3333 638.143 41.0417 638.143 49.875C638.143 58.7083 636.226 66.375 632.393 72.875C628.643 79.375 623.268 84.375 616.268 87.875C609.351 91.2917 601.268 93 592.018 93H563.643V6.125H592.018ZM592.018 81.375C602.184 81.375 609.976 78.625 615.393 73.125C620.809 67.625 623.518 59.875 623.518 49.875C623.518 39.7917 620.809 31.9167 615.393 26.25C609.976 20.5833 602.184 17.75 592.018 17.75H577.893V81.375H592.018Z"/>
<path d="M743.736 48.375C748.403 49.2083 752.361 51.6667 755.611 55.75C758.861 59.8333 760.486 64.4583 760.486 69.625C760.486 74.0417 759.32 78.0417 756.986 81.625C754.736 85.125 751.445 87.9167 747.111 90C742.778 92 737.736 93 731.986 93H697.236V6.125H730.361C736.278 6.125 741.361 7.125 745.611 9.12501C749.861 11.125 753.07 13.8333 755.236 17.25C757.403 20.5833 758.486 24.3333 758.486 28.5C758.486 33.5 757.153 37.6667 754.486 41C751.82 44.3333 748.236 46.7917 743.736 48.375ZM711.486 42.625H729.111C733.778 42.625 737.403 41.5833 739.986 39.5C742.653 37.3333 743.986 34.25 743.986 30.25C743.986 26.3333 742.653 23.2917 739.986 21.125C737.403 18.875 733.778 17.75 729.111 17.75H711.486V42.625ZM730.736 81.375C735.57 81.375 739.361 80.2083 742.111 77.875C744.861 75.5417 746.236 72.2917 746.236 68.125C746.236 63.875 744.778 60.5 741.861 58C738.945 55.5 735.07 54.25 730.236 54.25H711.486V81.375H730.736Z"/>
<path d="M846.597 6.125L817.847 61.5V93H803.597V61.5L774.722 6.125H790.597L810.722 48.75L830.847 6.125H846.597Z"/>
</mask>
<path d="M33.375 6.125C42.625 6.125 50.7083 7.91667 57.625 11.5C64.625 15 70 20.0833 73.75 26.75C77.5833 33.3333 79.5 41.0417 79.5 49.875C79.5 58.7083 77.5833 66.375 73.75 72.875C70 79.375 64.625 84.375 57.625 87.875C50.7083 91.2917 42.625 93 33.375 93H5V6.125H33.375ZM33.375 81.375C43.5417 81.375 51.3333 78.625 56.75 73.125C62.1667 67.625 64.875 59.875 64.875 49.875C64.875 39.7917 62.1667 31.9167 56.75 26.25C51.3333 20.5833 43.5417 17.75 33.375 17.75H19.25V81.375H33.375Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M114.123 17.625V43.125H144.123V54.75H114.123V81.375H147.873V93H99.873V6H147.873V17.625H114.123Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M200.3 93.875C194.466 93.875 189.216 92.875 184.55 90.875C179.883 88.7917 176.216 85.875 173.55 82.125C170.883 78.375 169.55 74 169.55 69H184.8C185.133 72.75 186.591 75.8333 189.175 78.25C191.841 80.6667 195.55 81.875 200.3 81.875C205.216 81.875 209.05 80.7083 211.8 78.375C214.55 75.9583 215.925 72.875 215.925 69.125C215.925 66.2083 215.05 63.8333 213.3 62C211.633 60.1667 209.508 58.75 206.925 57.75C204.425 56.75 200.925 55.6667 196.425 54.5C190.758 53 186.133 51.5 182.55 50C179.05 48.4167 176.05 46 173.55 42.75C171.05 39.5 169.8 35.1667 169.8 29.75C169.8 24.75 171.05 20.375 173.55 16.625C176.05 12.875 179.55 10 184.05 8.00001C188.55 6 193.758 5 199.675 5C208.091 5 214.966 7.125 220.3 11.375C225.716 15.5417 228.716 21.2917 229.3 28.625H213.55C213.3 25.4583 211.8 22.75 209.05 20.5C206.3 18.25 202.675 17.125 198.175 17.125C194.091 17.125 190.758 18.1667 188.175 20.25C185.591 22.3333 184.3 25.3333 184.3 29.25C184.3 31.9167 185.091 34.125 186.675 35.875C188.341 37.5417 190.425 38.875 192.925 39.875C195.425 40.875 198.841 41.9583 203.175 43.125C208.925 44.7083 213.591 46.2917 217.175 47.875C220.841 49.4583 223.925 51.9167 226.425 55.25C229.008 58.5 230.3 62.875 230.3 68.375C230.3 72.7917 229.091 76.9583 226.675 80.875C224.341 84.7917 220.883 87.9583 216.3 90.375C211.8 92.7083 206.466 93.875 200.3 93.875Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M267.614 6.125V93H253.364V6.125H267.614Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M355.448 31.125C353.198 26.7917 350.073 23.5417 346.073 21.375C342.073 19.125 337.448 18 332.198 18C326.448 18 321.323 19.2917 316.823 21.875C312.323 24.4583 308.782 28.125 306.198 32.875C303.698 37.625 302.448 43.125 302.448 49.375C302.448 55.625 303.698 61.1667 306.198 66C308.782 70.75 312.323 74.4167 316.823 77C321.323 79.5833 326.448 80.875 332.198 80.875C339.948 80.875 346.24 78.7083 351.073 74.375C355.907 70.0417 358.865 64.1667 359.948 56.75H327.323V45.375H375.198V56.5C374.282 63.25 371.865 69.4583 367.948 75.125C364.115 80.7917 359.073 85.3333 352.823 88.75C346.657 92.0833 339.782 93.75 332.198 93.75C324.032 93.75 316.573 91.875 309.823 88.125C303.073 84.2917 297.698 79 293.698 72.25C289.782 65.5 287.823 57.875 287.823 49.375C287.823 40.875 289.782 33.25 293.698 26.5C297.698 19.75 303.073 14.5 309.823 10.75C316.657 6.91667 324.115 5 332.198 5C341.448 5 349.657 7.29167 356.823 11.875C364.073 16.375 369.323 22.7917 372.573 31.125H355.448Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M466.878 93H452.628L409.753 28.125V93H395.503V6H409.753L452.628 70.75V6H466.878V93Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M506.091 17.625V43.125H536.091V54.75H506.091V81.375H539.841V93H491.841V6H539.841V17.625H506.091Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M592.018 6.125C601.268 6.125 609.351 7.91667 616.268 11.5C623.268 15 628.643 20.0833 632.393 26.75C636.226 33.3333 638.143 41.0417 638.143 49.875C638.143 58.7083 636.226 66.375 632.393 72.875C628.643 79.375 623.268 84.375 616.268 87.875C609.351 91.2917 601.268 93 592.018 93H563.643V6.125H592.018ZM592.018 81.375C602.184 81.375 609.976 78.625 615.393 73.125C620.809 67.625 623.518 59.875 623.518 49.875C623.518 39.7917 620.809 31.9167 615.393 26.25C609.976 20.5833 602.184 17.75 592.018 17.75H577.893V81.375H592.018Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M743.736 48.375C748.403 49.2083 752.361 51.6667 755.611 55.75C758.861 59.8333 760.486 64.4583 760.486 69.625C760.486 74.0417 759.32 78.0417 756.986 81.625C754.736 85.125 751.445 87.9167 747.111 90C742.778 92 737.736 93 731.986 93H697.236V6.125H730.361C736.278 6.125 741.361 7.125 745.611 9.12501C749.861 11.125 753.07 13.8333 755.236 17.25C757.403 20.5833 758.486 24.3333 758.486 28.5C758.486 33.5 757.153 37.6667 754.486 41C751.82 44.3333 748.236 46.7917 743.736 48.375ZM711.486 42.625H729.111C733.778 42.625 737.403 41.5833 739.986 39.5C742.653 37.3333 743.986 34.25 743.986 30.25C743.986 26.3333 742.653 23.2917 739.986 21.125C737.403 18.875 733.778 17.75 729.111 17.75H711.486V42.625ZM730.736 81.375C735.57 81.375 739.361 80.2083 742.111 77.875C744.861 75.5417 746.236 72.2917 746.236 68.125C746.236 63.875 744.778 60.5 741.861 58C738.945 55.5 735.07 54.25 730.236 54.25H711.486V81.375H730.736Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
<path d="M846.597 6.125L817.847 61.5V93H803.597V61.5L774.722 6.125H790.597L810.722 48.75L830.847 6.125H846.597Z" stroke="#A3A3A3" stroke-width="10" mask="url(#path-1-outside-1_1_13)"/>
</svg>
<svg id="animateBar" width="736" height="20" viewBox="0 0 736 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.07764 2.5H2.57764V5V15V17.5H5.07764H730.078H732.578V15V5V2.5H730.078H5.07764Z" stroke="#808080" stroke-width="5"/>
</svg>
<svg id="animateBottom" width="467" height="89" viewBox="0 0 467 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1_1_15" maskUnits="userSpaceOnUse" x="0.440918" y="0.559998" width="467" height="89" fill="black">
<rect fill="white" x="0.440918" y="0.559998" width="467" height="89"/>
<path d="M46.3609 43.73C50.4676 44.4633 53.9509 46.6267 56.8109 50.22C59.6709 53.8133 61.1009 57.8833 61.1009 62.43C61.1009 66.3167 60.0743 69.8367 58.0209 72.99C56.0409 76.07 53.1443 78.5267 49.3309 80.36C45.5176 82.12 41.0809 83 36.0209 83H5.44092V6.55H34.5909C39.7976 6.55 44.2709 7.43 48.0109 9.19C51.7509 10.95 54.5743 13.3333 56.4809 16.34C58.3876 19.2733 59.3409 22.5733 59.3409 26.24C59.3409 30.64 58.1676 34.3067 55.8209 37.24C53.4743 40.1733 50.3209 42.3367 46.3609 43.73ZM17.9809 38.67H33.4909C37.5976 38.67 40.7876 37.7533 43.0609 35.92C45.4076 34.0133 46.5809 31.3 46.5809 27.78C46.5809 24.3333 45.4076 21.6567 43.0609 19.75C40.7876 17.77 37.5976 16.78 33.4909 16.78H17.9809V38.67ZM34.9209 72.77C39.1743 72.77 42.5109 71.7433 44.9309 69.69C47.3509 67.6367 48.5609 64.7767 48.5609 61.11C48.5609 57.37 47.2776 54.4 44.7109 52.2C42.1443 50 38.7343 48.9 34.4809 48.9H17.9809V72.77H34.9209Z"/>
<path d="M92.768 72.88H118.618V83H80.228V6.55H92.768V72.88Z"/>
<path d="M169.475 83.77C162.362 83.77 155.798 82.12 149.785 78.82C143.845 75.4467 139.115 70.79 135.595 64.85C132.148 58.8367 130.425 52.09 130.425 44.61C130.425 37.13 132.148 30.42 135.595 24.48C139.115 18.54 143.845 13.92 149.785 10.62C155.798 7.24666 162.362 5.56 169.475 5.56C176.662 5.56 183.225 7.24666 189.165 10.62C195.178 13.92 199.908 18.54 203.355 24.48C206.802 30.42 208.525 37.13 208.525 44.61C208.525 52.09 206.802 58.8367 203.355 64.85C199.908 70.79 195.178 75.4467 189.165 78.82C183.225 82.12 176.662 83.77 169.475 83.77ZM169.475 72.88C174.535 72.88 179.045 71.7433 183.005 69.47C186.965 67.1233 190.045 63.8233 192.245 59.57C194.518 55.2433 195.655 50.2567 195.655 44.61C195.655 38.9633 194.518 34.0133 192.245 29.76C190.045 25.5067 186.965 22.2433 183.005 19.97C179.045 17.6967 174.535 16.56 169.475 16.56C164.415 16.56 159.905 17.6967 155.945 19.97C151.985 22.2433 148.868 25.5067 146.595 29.76C144.395 34.0133 143.295 38.9633 143.295 44.61C143.295 50.2567 144.395 55.2433 146.595 59.57C148.868 63.8233 151.985 67.1233 155.945 69.47C159.905 71.7433 164.415 72.88 169.475 72.88Z"/>
<path d="M261.235 83.77C254.121 83.77 247.558 82.12 241.545 78.82C235.605 75.4467 230.875 70.79 227.355 64.85C223.908 58.8367 222.185 52.09 222.185 44.61C222.185 37.13 223.908 30.42 227.355 24.48C230.875 18.54 235.605 13.92 241.545 10.62C247.558 7.24666 254.121 5.56 261.235 5.56C268.421 5.56 274.985 7.24666 280.925 10.62C286.938 13.92 291.668 18.54 295.115 24.48C298.561 30.42 300.285 37.13 300.285 44.61C300.285 52.09 298.561 58.8367 295.115 64.85C291.668 70.79 286.938 75.4467 280.925 78.82C274.985 82.12 268.421 83.77 261.235 83.77ZM261.235 72.88C266.295 72.88 270.805 71.7433 274.765 69.47C278.725 67.1233 281.805 63.8233 284.005 59.57C286.278 55.2433 287.415 50.2567 287.415 44.61C287.415 38.9633 286.278 34.0133 284.005 29.76C281.805 25.5067 278.725 22.2433 274.765 19.97C270.805 17.6967 266.295 16.56 261.235 16.56C256.175 16.56 251.665 17.6967 247.705 19.97C243.745 22.2433 240.628 25.5067 238.355 29.76C236.155 34.0133 235.055 38.9633 235.055 44.61C235.055 50.2567 236.155 55.2433 238.355 59.57C240.628 63.8233 243.745 67.1233 247.705 69.47C251.665 71.7433 256.175 72.88 261.235 72.88Z"/>
<path d="M343.095 6.55C351.235 6.55 358.348 8.12667 364.435 11.28C370.595 14.36 375.325 18.8333 378.625 24.7C381.998 30.4933 383.685 37.2767 383.685 45.05C383.685 52.8233 381.998 59.57 378.625 65.29C375.325 71.01 370.595 75.41 364.435 78.49C358.348 81.4967 351.235 83 343.095 83H318.125V6.55H343.095ZM343.095 72.77C352.041 72.77 358.898 70.35 363.665 65.51C368.431 60.67 370.815 53.85 370.815 45.05C370.815 36.1767 368.431 29.2467 363.665 24.26C358.898 19.2733 352.041 16.78 343.095 16.78H330.665V72.77H343.095Z"/>
<path d="M458.263 6.55L432.963 55.28V83H420.423V55.28L395.013 6.55H408.983L426.693 44.06L444.403 6.55H458.263Z"/>
</mask>
<path d="M46.3609 43.73C50.4676 44.4633 53.9509 46.6267 56.8109 50.22C59.6709 53.8133 61.1009 57.8833 61.1009 62.43C61.1009 66.3167 60.0743 69.8367 58.0209 72.99C56.0409 76.07 53.1443 78.5267 49.3309 80.36C45.5176 82.12 41.0809 83 36.0209 83H5.44092V6.55H34.5909C39.7976 6.55 44.2709 7.43 48.0109 9.19C51.7509 10.95 54.5743 13.3333 56.4809 16.34C58.3876 19.2733 59.3409 22.5733 59.3409 26.24C59.3409 30.64 58.1676 34.3067 55.8209 37.24C53.4743 40.1733 50.3209 42.3367 46.3609 43.73ZM17.9809 38.67H33.4909C37.5976 38.67 40.7876 37.7533 43.0609 35.92C45.4076 34.0133 46.5809 31.3 46.5809 27.78C46.5809 24.3333 45.4076 21.6567 43.0609 19.75C40.7876 17.77 37.5976 16.78 33.4909 16.78H17.9809V38.67ZM34.9209 72.77C39.1743 72.77 42.5109 71.7433 44.9309 69.69C47.3509 67.6367 48.5609 64.7767 48.5609 61.11C48.5609 57.37 47.2776 54.4 44.7109 52.2C42.1443 50 38.7343 48.9 34.4809 48.9H17.9809V72.77H34.9209Z" stroke="#808080" stroke-width="10" mask="url(#path-1-outside-1_1_15)"/>
<path d="M92.768 72.88H118.618V83H80.228V6.55H92.768V72.88Z" stroke="#808080" stroke-width="10" mask="url(#path-1-outside-1_1_15)"/>
<path d="M169.475 83.77C162.362 83.77 155.798 82.12 149.785 78.82C143.845 75.4467 139.115 70.79 135.595 64.85C132.148 58.8367 130.425 52.09 130.425 44.61C130.425 37.13 132.148 30.42 135.595 24.48C139.115 18.54 143.845 13.92 149.785 10.62C155.798 7.24666 162.362 5.56 169.475 5.56C176.662 5.56 183.225 7.24666 189.165 10.62C195.178 13.92 199.908 18.54 203.355 24.48C206.802 30.42 208.525 37.13 208.525 44.61C208.525 52.09 206.802 58.8367 203.355 64.85C199.908 70.79 195.178 75.4467 189.165 78.82C183.225 82.12 176.662 83.77 169.475 83.77ZM169.475 72.88C174.535 72.88 179.045 71.7433 183.005 69.47C186.965 67.1233 190.045 63.8233 192.245 59.57C194.518 55.2433 195.655 50.2567 195.655 44.61C195.655 38.9633 194.518 34.0133 192.245 29.76C190.045 25.5067 186.965 22.2433 183.005 19.97C179.045 17.6967 174.535 16.56 169.475 16.56C164.415 16.56 159.905 17.6967 155.945 19.97C151.985 22.2433 148.868 25.5067 146.595 29.76C144.395 34.0133 143.295 38.9633 143.295 44.61C143.295 50.2567 144.395 55.2433 146.595 59.57C148.868 63.8233 151.985 67.1233 155.945 69.47C159.905 71.7433 164.415 72.88 169.475 72.88Z" stroke="#808080" stroke-width="10" mask="url(#path-1-outside-1_1_15)"/>
<path d="M261.235 83.77C254.121 83.77 247.558 82.12 241.545 78.82C235.605 75.4467 230.875 70.79 227.355 64.85C223.908 58.8367 222.185 52.09 222.185 44.61C222.185 37.13 223.908 30.42 227.355 24.48C230.875 18.54 235.605 13.92 241.545 10.62C247.558 7.24666 254.121 5.56 261.235 5.56C268.421 5.56 274.985 7.24666 280.925 10.62C286.938 13.92 291.668 18.54 295.115 24.48C298.561 30.42 300.285 37.13 300.285 44.61C300.285 52.09 298.561 58.8367 295.115 64.85C291.668 70.79 286.938 75.4467 280.925 78.82C274.985 82.12 268.421 83.77 261.235 83.77ZM261.235 72.88C266.295 72.88 270.805 71.7433 274.765 69.47C278.725 67.1233 281.805 63.8233 284.005 59.57C286.278 55.2433 287.415 50.2567 287.415 44.61C287.415 38.9633 286.278 34.0133 284.005 29.76C281.805 25.5067 278.725 22.2433 274.765 19.97C270.805 17.6967 266.295 16.56 261.235 16.56C256.175 16.56 251.665 17.6967 247.705 19.97C243.745 22.2433 240.628 25.5067 238.355 29.76C236.155 34.0133 235.055 38.9633 235.055 44.61C235.055 50.2567 236.155 55.2433 238.355 59.57C240.628 63.8233 243.745 67.1233 247.705 69.47C251.665 71.7433 256.175 72.88 261.235 72.88Z" stroke="#808080" stroke-width="10" mask="url(#path-1-outside-1_1_15)"/>
<path d="M343.095 6.55C351.235 6.55 358.348 8.12667 364.435 11.28C370.595 14.36 375.325 18.8333 378.625 24.7C381.998 30.4933 383.685 37.2767 383.685 45.05C383.685 52.8233 381.998 59.57 378.625 65.29C375.325 71.01 370.595 75.41 364.435 78.49C358.348 81.4967 351.235 83 343.095 83H318.125V6.55H343.095ZM343.095 72.77C352.041 72.77 358.898 70.35 363.665 65.51C368.431 60.67 370.815 53.85 370.815 45.05C370.815 36.1767 368.431 29.2467 363.665 24.26C358.898 19.2733 352.041 16.78 343.095 16.78H330.665V72.77H343.095Z" stroke="#808080" stroke-width="10" mask="url(#path-1-outside-1_1_15)"/>
<path d="M458.263 6.55L432.963 55.28V83H420.423V55.28L395.013 6.55H408.983L426.693 44.06L444.403 6.55H458.263Z" stroke="#808080" stroke-width="10" mask="url(#path-1-outside-1_1_15)"/>
</svg>但有一个问题——条形图充满了颜色，但文本不会出现这种情况。
我需要做些什么来修复它？
请提供一个更简单的代码示例，因为会有更多的人愿意帮助您。
正如Ouroborus提到的，你的面具正在干扰。面具是一张黑白照片。将显示对象和黑色部分重叠的位置。因此，您需要移除遮罩(因为这样会显示整个原始对象(或将黑色对象的大小增加到字母内部，以便也可以对其进行着色。
你的代码中的掩码似乎没有太大的作用，这样删除它似乎很容易。下面：左边是你的代码，右边没有掩码。调整遮罩以允许在动画中的正确时间填充或从一开始就允许填充有点困难，但也是可能的。
<svg
width="855"
height="99"
viewBox="0 0 855 99"
xmlns="http://www.w3.org/2000/svg"
>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100%;
width: 100%;
background-color: #f2ba00;
stroke-linecap: round;
}
@keyframes lineanim {
to {
stroke-dashoffset: 0;
}
}
@keyframes fillOne {
from {
fill: transparent;
}
to {
fill: #a3a3a3;
}
}
#withMask {
mask: url(#path-1-outside-1_1_13);
}
#withMask,
#noMask {
animation: fillOne 0.5s ease-in-out infinite alternate;
}
</style>
<mask
id="path-1-outside-1_1_13"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="855"
height="99"
fill="black"
>
<rect fill="white" width="855" height="99" />
<path
d="M33.375 6.125C42.625 6.125 50.7083 7.91667 57.625 11.5C64.625 15 70 20.0833 73.75 26.75C77.5833 33.3333 79.5 41.0417 79.5 49.875C79.5 58.7083 77.5833 66.375 73.75 72.875C70 79.375 64.625 84.375 57.625 87.875C50.7083 91.2917 42.625 93 33.375 93H5V6.125H33.375ZM33.375 81.375C43.5417 81.375 51.3333 78.625 56.75 73.125C62.1667 67.625 64.875 59.875 64.875 49.875C64.875 39.7917 62.1667 31.9167 56.75 26.25C51.3333 20.5833 43.5417 17.75 33.375 17.75H19.25V81.375H33.375Z"
/>
</mask>
<path
id="withMask"
d="M33.375 6.125C42.625 6.125 50.7083 7.91667 57.625 11.5C64.625 15 70 20.0833 73.75 26.75C77.5833 33.3333 79.5 41.0417 79.5 49.875C79.5 58.7083 77.5833 66.375 73.75 72.875C70 79.375 64.625 84.375 57.625 87.875C50.7083 91.2917 42.625 93 33.375 93H5V6.125H33.375ZM33.375 81.375C43.5417 81.375 51.3333 78.625 56.75 73.125C62.1667 67.625 64.875 59.875 64.875 49.875C64.875 39.7917 62.1667 31.9167 56.75 26.25C51.3333 20.5833 43.5417 17.75 33.375 17.75H19.25V81.375H33.375Z"
stroke="#A3A3A3"
stroke-width="10"
/>
<path
id="noMask"
d="M33.375 6.125C42.625 6.125 50.7083 7.91667 57.625 11.5C64.625 15 70 20.0833 73.75 26.75C77.5833 33.3333 79.5 41.0417 79.5 49.875C79.5 58.7083 77.5833 66.375 73.75 72.875C70 79.375 64.625 84.375 57.625 87.875C50.7083 91.2917 42.625 93 33.375 93H5V6.125H33.375ZM33.375 81.375C43.5417 81.375 51.3333 78.625 56.75 73.125C62.1667 67.625 64.875 59.875 64.875 49.875C64.875 39.7917 62.1667 31.9167 56.75 26.25C51.3333 20.5833 43.5417 17.75 33.375 17.75H19.25V81.375H33.375Z"
stroke="#A3A3A3"
stroke-width="10"
transform="translate(200)"
/>
</svg>