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

Posted 2023-05-08

【中文标题】SVG悬停时的平滑过渡线性渐变

【英文标题】：Smooth Transition Linear Gradient on SVG Hover

【发布时间】：2020-06-03 15:19:45

【问题描述】：

我有一个线性渐变 svg 悬停的过渡问题。 渐变还可以，但我不能为我的路径应用平滑过渡。

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>

【问题讨论】：

检查this

我们不能不敷面膜吗？

我不这么认为。但是口罩有什么问题呢？

这能回答你的问题吗？ Using CSS to transition the fill property of an SVG path on hover

这不是线性渐变。我看到了。这些并不能完全回答我的问题。面具不是问题，我正在尝试进行某种开发。有太多的方法，但我无法完全达到我想要的效果

【参考方案1】：

怎么样？

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>

【讨论】：

是的，可以。我可以为 4 5 a href 链接做什么？导致不使用相同的 id 相同的页面。

您不能对所有这些都使用“形状”。您必须将它们设为“shape1”、“shape2”等

另请注意，您可以将所有通用定义移动到一个单独的 SVG 中。如果渐变相同，则不必重复。

好的，谢谢。它会为我工作。实际上，有很多方法，我想学习所有方法，所有替代方法。所以这对我有好处。因为我卡在某个地方..