如何为带dashed stroke的SVG文本实现平滑hover过渡效果？

你的问题出在这几个核心点：

• SVG文本的fill设为none，HTML元素的color属性对它完全无效，必须用SVG专属的fill属性控制填充色。
• 你给#dashedText加了stroke-dashoffset的过渡，但既没定义初始状态的偏移值，也没在hover时修改该属性，自然看不到过渡效果。
• 若要实现虚线到实线的平滑过渡，需要利用文本的总长度来控制stroke-dasharray和stroke-dashoffset。

下面是两种可行的解决方案：

方案1：虚线描边平滑转为实线 #

通过JS获取文本总长度并存储为CSS变量，再通过修改stroke-dasharray实现过渡效果：

修改后的HTML #

<div id='box3' class='btn-1'>
  <h1>
    <svg width="400" height="100">
      <text id='dashedText' x="10" y="50" font-size="36" font-weight="bold" fill="none" stroke="black" stroke-dasharray="4,2">
        Hello There
      </text>
    </svg>
  </h1>
</div>

修改后的CSS + JS #

#box3 {
  margin-top: 150px;
  height: 300px;
  width: 300px;
  margin: auto;
  background-color: #f2ece2;
  border: 1px dashed black;
  transition: background-color 0.3s, box-shadow 0.3s, border 0.3s, transform 0.3s;
}

#box3:hover {
  box-shadow: 5px 5px 0 black;
  background-color: #ede2ce;
  border: 1px solid black;
  cursor: pointer;
}

#dashedText {
  --text-length: 0;
  stroke-dasharray: 4,2;
  transition: stroke-dasharray 0.3s ease, fill 0.3s ease;
}

#dashedText:hover {
  stroke-dasharray: var(--text-length);
  fill: black;
}

const dashedText = document.getElementById('dashedText');
const textLength = dashedText.getTotalLength();
dashedText.style.setProperty('--text-length', textLength);

方案2：仅平滑切换填充色（保留虚线描边） #

如果只需要hover时给文本添加填充色，直接修改fill属性并添加过渡即可：

#dashedText {
  fill: none;
  stroke: black;
  stroke-dasharray: 4,2;
  transition: fill 0.3s ease;
}

#dashedText:hover {
  fill: black;
}

关键提醒：SVG元素的样式控制要使用SVG专属属性（fill、stroke、stroke-dasharray等），不要混用HTML元素的color属性，两者不兼容。

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