SVG 悬停上的平滑过渡线性渐变

Question

i have a transition problem for linear gradient svg hover. Gradient is ok but i cant apply smooth transition for my path.

ps:i want to use only one path, without mask.

Thank you

 path#grad1 { transition: 3s;} svg { transition: 3s; width: 160px; max-height: 80px; margin-bottom: 20px; } svg .gradient { fill: url("#grad1"); } svg:hover .gradient { fill: url("#grad2"); }

 <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="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color: #07183d; " /> <stop offset="100%" style="stop-color: #07183d; " /> </linearGradient> </defs> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%" > <stop offset="0%" style="stop-color: #FE8301; " /> <stop offset="100%" style="stop-color: #003ec7; " /> </linearGradient> </defs> </svg> </a>

Answer 1

How's this?

 path#grad1 { transition: 3s;} svg { width: 160px; max-height: 80px; margin-bottom: 20px; } svg .gradient1 { fill: url("#grad1"); } svg .gradient2 { fill: url("#grad2"); } svg use { transition: 3s; opacity: 0; } svg:hover use { opacity: 1; }

 <a href="" target=""> <svg viewBox="0 0 30 60"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color: #07183d; " /> <stop offset="100%" style="stop-color: #07183d; " /> </linearGradient> <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%" > <stop offset="0%" style="stop-color: #FE8301; " /> <stop offset="100%" style="stop-color: #003ec7; " /> </linearGradient> </defs> <g class="gradient1"> <path id="shape" 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" /> </g> <use xlink:href="#shape" class="gradient2"/> </svg> </a>