SVG中stroke-dasharray属性未生效问题求助

问题概述 #

跟着旧教程制作SVG动画，在Codepen中为path元素设置stroke-dasharray属性后无效果，尝试过设置像素值、添加stroke属性、确认属性应用、修改fill格式等操作，仍未得到预期的虚线文字效果。

代码示例 #

CSS代码

.container {
  background-color: black;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.path-1 {
  stroke-dasharray: 4;
}

HTML代码

<div class="container">
  <div class="animation-wrap">
  <svg class="logo" width="324" height="47" viewBox="0 0 324 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M59.992 1.392L47.064 46H40.536L30.168 10.096L19.416 46L12.952 46.064L0.472 1.392H6.68L16.408 39.216L27.16 1.392H33.688L43.928 39.088L53.72 1.392H59.992Z" fill="white"/>
<path class="path-1" d="M72.1895 6.128V21.04H88.4455V25.84H72.1895V41.2H90.3655V46H66.3655V1.328H90.3655V6.128H72.1895Z" fill="white"/>
<path d="M122.666 46L112.042 27.76H105.002V46H99.178V1.392H113.578C116.949 1.392 119.786 1.968 122.09 3.12C124.437 4.272 126.186 5.82933 127.338 7.792C128.49 9.75467 129.066 11.9947 129.066 14.512C129.066 17.584 128.17 20.2933 126.378 22.64C124.629 24.9867 121.983 26.544 118.442 27.312L129.642 46H122.666ZM105.002 23.088H113.578C116.735 23.088 119.103 22.32 120.682 20.784C122.261 19.2053 123.05 17.1147 123.05 14.512C123.05 11.8667 122.261 9.81867 120.682 8.368C119.146 6.91733 116.778 6.192 113.578 6.192H105.002V23.088Z" fill="white"/>
<path d="M158.34 46.448C154.201 46.448 150.425 45.488 147.012 43.568C143.598 41.6053 140.889 38.896 138.883 35.44C136.921 31.9413 135.939 28.016 135.939 23.664C135.939 19.312 136.921 15.408 138.883 11.952C140.889 8.45333 143.598 5.744 147.012 3.824C150.425 1.86133 154.201 0.879997 158.34 0.879997C162.521 0.879997 166.318 1.86133 169.732 3.824C173.145 5.744 175.833 8.432 177.796 11.888C179.758 15.344 180.74 19.2693 180.74 23.664C180.74 28.0587 179.758 31.984 177.796 35.44C175.833 38.896 173.145 41.6053 169.732 43.568C166.318 45.488 162.521 46.448 158.34 46.448ZM158.34 41.392C161.454 41.392 164.249 40.6667 166.724 39.216C169.241 37.7653 171.204 35.696 172.612 33.008C174.062 30.32 174.788 27.2053 174.788 23.664C174.788 20.08 174.062 16.9653 172.612 14.32C171.204 11.632 169.262 9.56267 166.788 8.112C164.313 6.66133 161.497 5.936 158.34 5.936C155.182 5.936 152.366 6.66133 149.891 8.112C147.417 9.56267 145.454 11.632 144.003 14.32C142.595 16.9653 141.891 20.08 141.891 23.664C141.891 27.2053 142.595 30.32 144.003 33.008C145.454 35.696 147.417 37.7653 149.891 39.216C152.409 40.6667 155.225 41.392 158.34 41.392Z" fill="white"/>
<path d="M223.5 46H217.676L194.252 10.48V46H188.428V1.328H194.252L217.676 36.784V1.328H223.5V46Z" fill="white"/>
<path d="M239.252 1.392V46H233.428V1.392H239.252Z" fill="white"/>
<path d="M273.37 46L255.002 25.648V46H249.178V1.392H255.002V22.064L273.434 1.392H280.794L260.57 23.728L280.986 46H273.37Z" fill="white"/>
<path d="M313.858 36.08H294.402L290.818 46H284.675L300.803 1.648H307.522L323.587 46H317.443L313.858 36.08ZM312.194 31.344L304.131 8.816L296.066 31.344H312.194Z" fill="white"/>
</svg>
</div>
  </div>

已尝试的解决方法 #

• 为stroke-dasharray设置像素值
• 添加stroke属性（有变化但未达预期虚线文字效果）
• 确认属性已应用到path元素
• 将fill值改为#fff排查格式问题

解决方案 #

问题核心在于：stroke-dasharray是作用于**描边（stroke）**的属性，而当前path使用的是fill填充整个图形，描边默认宽度为0，所以看不到dasharray效果。要实现虚线文字效果，需要调整以下几点：

1. 去掉目标path的fill属性，或者设置fill="none"
2. 为path设置stroke颜色（比如白色）
3. 设置合适的stroke-width值，确保描边足够清晰
4. 调整stroke-dasharray的参数，达到预期的虚线样式

修改后的.path-1 CSS示例：

.path-1 {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 4 2;
}

这样设置后，path会以描边形式显示，stroke-dasharray的虚线效果就能正常生效了。如果需要保留填充+虚线描边的效果，可以同时保留fill和设置stroke相关属性。

内容的提问来源于stack exchange，提问作者krzyzws