Trying to animate SVG text to display only the outer stroke of each letter initially, followed by filling the interior with color. However, after the animation finishes, there are unfilled spaces left. Is there a property that can be applied to the SVG or paths to completely fill the inside of each letter without increasing the stroke thickness? (In order to maintain the initial appearance of the animation) See example below:
<svg id="testSVG" width="312" height="219" viewBox="0 0 312 219" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.632004" y="0.312012" width="311" height="219" fill="black">
<rect fill="white" x="0.632004" y="0.312012" width="311" height="219"/>
<path d="M13.152 52H6.896V3.31201H13.152V24.188H37.496V3.31201H43.752V52H37.496V30.036H13.152V52Z"/>
</* more paths here */>
</svg>
#testSVG path:nth-child(2) {
//H
stroke-dasharray: 256.77;
stroke-dashoffset: 256.7679443359375;
animation: svgfill 1s ease forwards;
}
#testSVG path:nth-child(3) {
//A
stroke-dasharray: 236.68453979492188;
stroke-dashoffset: 236.68453979492188;
animation: svgfill 1s ease forwards;
}
/* remaining CSS code */
@keyframes svgfill {
to {
fill: white;
}
}