svg stroke-dasharray not wroking

Question

I just started working with SVG's and I got stuck at stroke-dasharray part. I searched a lot but still, I could not find the solution to my problem. I think I am missing something. Even after using stroke-dasharray, the text is not dashed. I was trying to do an animation effect with the text like from dashed to complete bold finish.

 #namelogo{ width: 100%; height: auto; } #namelogo path:nth-child(1){ stroke-dasharray: 300; }

 <div class="logo"> <svg id="namelogo" viewBox="0 0 659 112" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="-0.791992" y="0.335999" width="660" height="111" fill="black"> <rect fill="white" x="-0.791992" y="0.335999" width="660" height="111"/> <path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z"/> <path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z"/> <path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z"/> <path d="M325.911 5.632V106H312.807V5.632H325.911Z"/> <path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z"/> <path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z"/> <path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z"/> <path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z"/> </mask> <path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M325.911 5.632V106H312.807V5.632H325.911Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> </svg> </div>

Answer 1

1. The path:nth-child(1) rule is matching any <path> element that is the first child of a parent element in the SVG. The first child of the SVG is the <mask> element. And the first child of the only other parent, the <mask> , is a <rect> element. So that CSS rule is not matching anything. To get the first path (second child) you would need to use nth-child(2) ,
2. The mask seems to be for implementing an outside stroke, so you probably don't want the rule to to apply all paths in the mask also. So you should probably use #namelogo > path:nth-child(2) . That will limit the rule to only the direct children of the #namelogo .
3. The paths are white, so they are not showing up on a white background. In the example below I've set the svg background to red, so my changes show up.

 #namelogo{ width: 100%; height: auto; background-color: red; } #namelogo > path:nth-child(2){ stroke-dasharray: 300; }

 <div class="logo"> <svg id="namelogo" viewBox="0 0 659 112" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="-0.791992" y="0.335999" width="660" height="111" fill="black"> <rect fill="white" x="-0.791992" y="0.335999" width="660" height="111"/> <path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z"/> <path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z"/> <path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z"/> <path d="M325.911 5.632V106H312.807V5.632H325.911Z"/> <path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z"/> <path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z"/> <path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z"/> <path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z"/> </mask> <path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M325.911 5.632V106H312.807V5.632H325.911Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> <path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/> </svg> </div>