Линейный градиент плавного перехода на SVG Hover - PullRequest
Новая
       11

Линейный градиент плавного перехода на SVG Hover

0 голосов
/ 19 февраля 2020

У меня есть проблема перехода для линейного градиента SVG hover. Градиент в порядке, но я не могу применить плавный переход для моего пути.

ps: я хочу использовать только один путь, без маски.

Спасибо 

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>

1 Ответ

1 голос
/ 19 февраля 2020

Как это? 

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