svg 中风-dasharray 没有工作

Question

我刚开始使用 SVG，我被困在了 stroke-dasharray 部分。 我进行了很多搜索，但仍然找不到解决问题的方法。 我想我错过了一些东西。 即使在使用 stroke-dasharray 之后，文本也不是虚线。 我试图做一个 animation 效果，文本从虚线到完整的粗体完成。

 #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. path:nth-child(1)规则匹配任何<path>元素，该元素是 SVG 中父元素的第一个子元素。 SVG 的第一个子元素是<mask>元素。 唯一的另一个父元素<mask>的第一个子元素是一个<rect>元素。 所以 CSS 规则不匹配任何东西。 要获得第一个路径（第二个孩子），您需要使用nth-child(2) ，
2. 蒙版似乎用于实现外部笔划，因此您可能不希望规则也应用蒙版中的所有路径。 所以你可能应该使用#namelogo > path:nth-child(2) 。 这会将规则限制为仅#namelogo的直接子级。
3. 路径是白色的，因此它们不会出现在白色背景上。 在下面的示例中，我将 svg 背景设置为红色，因此我的更改会显示出来。

 #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>