如何解决SVG填充颜色与描边动画的显示冲突问题？

我正在处理一段SVG描边动画，当前代码如下：

SVG代码：

<svg class="animationCounter2" width="80%" height="80%" viewBox="0 0 295 298" fill="none" 
  xmlns="http://www.w3.org/2000/svg">
  <path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M0 45.4119C27.6939 36.5087 55.7265 28.637 84.1171 22.1956C112.508 15.7834 141.208 10.7528 170.102 7.18185C198.996 3.64005 228.073 1.63562 257.161 0.740441C271.704 0.28312 286.258 0.0982462 300.801 0.0204044C308.068 -0.0282467 315.345 0.0204044 322.622 0.0593253C329.898 0.0982462 337.165 0.0982462 344.442 0.234469C373.529 0.555567 402.607 1.45075 431.675 2.80325C460.733 4.15575 489.772 5.99476 518.772 8.30082C547.773 10.6069 576.734 13.3897 605.647 16.5715C634.56 19.7436 663.425 23.3535 692.261 27.1483C721.097 30.9431 749.894 34.9616 778.71 38.8634C807.517 42.7458 836.333 46.5892 865.217 49.7321C879.654 51.3668 894.111 52.6998 908.587 53.9453C915.825 54.4805 923.063 55.1032 930.31 55.5119C933.929 55.7259 937.558 55.9984 941.177 56.1638L952.053 56.66C966.549 57.2925 981.054 57.3898 995.53 56.7768C1009.98 56.1054 1024.46 54.8307 1038.47 51.5906C1045.44 49.9267 1052.36 47.7666 1058.44 44.2637C1061.45 42.5123 1064.22 40.3522 1066.26 37.6958C1068.32 35.0492 1069.45 31.848 1069.44 28.53C1069.45 26.9245 1069.12 25.3676 1068.4 24.0249C1067.71 22.6821 1066.61 21.5631 1065.29 20.775C1062.64 19.1889 1059.14 19.0235 1056.19 20.162C1053.2 21.2809 1050.81 23.7135 1049.5 26.7201C1048.85 28.2186 1048.4 29.8435 1048.18 31.5269C1047.96 33.2005 1047.89 34.9616 1048.07 36.5671C1048.45 39.8462 1049.98 42.921 1052.17 45.5384C1054.35 48.1655 1057.12 50.3548 1060.09 52.2522C1066.06 56.0276 1072.8 58.6742 1079.64 60.7856C1083.07 61.8365 1086.54 62.722 1090.08 63.4809C1093.6 64.2788 1097.14 64.9891 1100.7 65.641C1107.81 66.9254 1114.98 67.8984 1122.17 68.5309C1150.95 71.1191 1180.28 67.9276 1207.74 58.645C1235.18 49.3526 1260.69 34.1929 1282 14.2752C1261.22 34.7476 1235.84 50.53 1208.31 60.2991C1194.54 65.174 1180.25 68.6282 1165.74 70.3894C1151.23 72.2089 1136.53 72.4425 1121.95 71.3137C1114.67 70.7494 1107.4 69.8347 1100.19 68.6087C1096.59 67.986 1092.99 67.2952 1089.42 66.5265C1085.84 65.787 1082.26 64.8821 1078.74 63.8215C1071.7 61.6808 1064.74 58.9953 1058.38 55.0059C1055.21 52.9917 1052.19 50.637 1049.68 47.6596C1047.18 44.7113 1045.28 41.0041 1044.8 36.9855C1044.57 34.9616 1044.65 33.035 1044.9 31.089C1045.15 29.143 1045.66 27.2066 1046.48 25.3676C1047.29 23.5286 1048.44 21.8064 1049.9 20.3663C1051.35 18.9262 1053.12 17.7878 1055.04 17.058C1058.86 15.5985 1063.34 15.7736 1066.99 17.9337C1068.8 19.0041 1070.36 20.5901 1071.33 22.4875C1072.33 24.3752 1072.76 26.5061 1072.75 28.5494C1072.75 30.5441 1072.41 32.568 1071.74 34.4654C1071.07 36.3725 1070.09 38.1337 1068.89 39.7002C1066.47 42.8334 1063.35 45.2076 1060.09 47.0952C1056.82 48.9926 1053.37 50.4521 1049.87 51.6782C1046.37 52.9139 1042.81 53.8772 1039.23 54.7237C1024.87 58.0028 1010.26 59.2288 995.684 59.8613C981.102 60.4354 966.51 60.2991 951.966 59.618C937.423 58.9855 922.898 58.032 908.384 56.8838C893.879 55.6481 879.393 54.315 864.937 52.6901C836.004 49.557 807.168 45.733 778.342 41.8604C749.526 37.9683 720.729 33.9692 691.903 30.2036C634.26 22.6334 576.502 15.9682 518.569 11.3172C489.608 8.98194 460.598 7.11374 431.578 5.74178C402.549 4.36008 373.51 3.43571 344.452 3.08542C337.185 2.93947 329.927 2.92974 322.66 2.89082L300.869 2.82271C286.335 2.82271 271.811 2.92974 257.296 3.30922C228.267 4.04872 199.257 5.90719 170.411 9.27385C141.556 12.5529 112.856 17.3013 84.4461 23.4216C55.9684 29.5127 27.8197 36.9077 0 45.4119Z" fill="white"/>
</svg>

CSS代码：

.svg-path{
    fill:transparent;
    stroke:white;
    stroke-miterlimit:10;
    stroke-width:2px;
    fill-rule:evenodd;
}

.draw2{
    stroke-dasharray: 3000;
    animation: 5s write2;
    filter: drop-shadow(0px 1px 10px gray);
}
@keyframes write2 {
    0% {
        stroke-dashoffset: 3000; 
    }
    100% {
        stroke-dashoffset: 0;
    }
}

遇到的问题 #

• 当fill设为white时，SVG显示正常，但描边动画几乎看不到；
• 把stroke-width调到5px，描边又太粗，不符合需求。

1. 分离描边层与填充层 #

核心问题是填充层覆盖了描边层，导致动画被遮挡。将路径复制一份，分别作为静态填充层和描边动画层，通过层级关系让描边显示在上方：

修改后的SVG：

<svg class="animationCounter2" width="80%" height="80%" viewBox="0 0 295 298" fill="none" 
  xmlns="http://www.w3.org/2000/svg">
  <!-- 静态填充层，放在底层 -->
  <path class="path-fill" fill-rule="evenodd" clip-rule="evenodd" d="M0 45.4119C27.6939 36.5087 55.7265 28.637 84.1171 22.1956C112.508 15.7834 141.208 10.7528 170.102 7.18185C198.996 3.64005 228.073 1.63562 257.161 0.740441C271.704 0.28312 286.258 0.0982462 300.801 0.0204044C308.068 -0.0282467 315.345 0.0204044 322.622 0.0593253C329.898 0.0982462 337.165 0.