SVG线性渐变Hover平滑过渡问题求助（单路径无蒙版）

I get your frustration—trying to transition between two separate gradient URLs doesn’t work because CSS treats those as non-animatable discrete values. But we can make this work with a single gradient and CSS variables, keeping your single path and avoiding masks entirely.

Here's the Breakdown of the Fix: #

• We’ll use one linear gradient instead of two, controlling its stop colors with CSS custom properties (variables).
• Add transitions to the gradient’s <stop> elements so their colors animate smoothly on hover.
• Update the variables on svg:hover to swap the gradient colors, triggering the transition.

Modified Working Code: #

/* Define base gradient colors */
:root {
  --grad-start: #07183d;
  --grad-end: #07183d;
}

svg {
  width: 160px;
  max-height: 80px;
  margin-bottom: 20px;
}

/* Add transition to gradient stops for smooth color animation */
svg #grad stop {
  transition: stop-color 3s ease;
}

/* Path uses the single gradient */
svg .gradient {
  fill: url("#grad");
}

/* Update gradient colors on hover */
svg:hover {
  --grad-start: #FE8301;
  --grad-end: #003ec7;
}

<a href="" target="">
  <svg viewBox="0 0 30 60">
    <path class="gradient" d="M6.93,59.16A1.36,1.36,0,0,1,6.35,59a1.38,1.38,0,0,1-.74-1.62L12.9,31.65H1.37A1.38,1.38,0,0,1,.29,29.43L22.8.53A1.36,1.36,0,0,1,24.5.15a1.37,1.37,0,0,1,.71,1.59L19.3,23.06H30a1.38,1.38,0,0,1,1.13,2.16L8.06,58.57A1.37,1.37,0,0,1,6.93,59.16ZM4.19,28.9H14.71a1.37,1.37,0,0,1,1.1.55,1.39,1.39,0,0,1,.23,1.2L10.51,50.2,27.37,25.81H17.49a1.37,1.37,0,0,1-1.09-.54,1.35,1.35,0,0,1-.23-1.2L20.71,7.69Z" />
    <defs>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color: var(--grad-start);" />
        <stop offset="100%" style="stop-color: var(--grad-end);" />
      </linearGradient>
    </defs>
  </svg>
</a>

Why This Works: #

• Instead of switching between two gradient URLs (which CSS can’t animate), we’re modifying the color values of a single gradient’s stops. Color is an animatable property, so the transition works smoothly over your desired 3-second duration.
• Your single path stays intact, no masks required—just a single gradient controlled by CSS variables that update on hover.

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