如何更改 SVG 中的过渡级别？答案

【问题标题】：How do I change the transition level in SVG?如何更改 SVG 中的过渡级别？
【发布时间】：2019-04-02 19:40:45
【问题描述】：

我需要帮助

我正在尝试使用 SVG 制作 HTML5 徽标。 HTML5 标志是一半深橙色和一半橙色。我想使用 linearGradient 标签来做到这一点，但渐变具有平滑过渡，我需要徽标的即时过渡。

代码

HTML

<!DOCTYPE html>
<html>
        <head>
              <title>HTML SVG</title>
        </head>
    <body>

    <svg viewbox="0 0 150 150">

        <defs>

            <linearGradient id="gradient">

                <stop class="stop1" offset="0%"/>
                <stop class="stop2" offset="50%"/>

            </linearGradient>

        </defs>

        <polygon id="polygon" fill="#E34C26" stroke="#E34C26" stroke-width="5" points="10 10, 90 10, 85 95, 50 105, 15 95"/>

    </svg>

</body>

CSS

<style>

    #polygon { fill:url(#gradient) }
    .stop1 { stop-color:#E34C26 }
    .stop2 { stop-color:#F06529 }

</style>

【问题讨论】：

标签： css html svg css-transitions

【解决方案1】：

您应该在等于起始颜色的 50% 处添加另一个停止。这将停止第一种颜色并在完全相同的点开始第二种颜色，基本上消除了两者之间的过渡。

#polygon {
  fill: url(#gradient)
}

.stop1,
.stop2 {
  stop-color: #E34C26
}

.stop3 {
  stop-color: #F06529
}

<svg viewbox="0 0 150 150">
    <defs>
        <linearGradient id="gradient">
            <stop class="stop1" offset="0%"/>
            <stop class="stop2" offset="50%"/>
            <stop class="stop3" offset="50%"/>
        </linearGradient>
    </defs>
    <polygon id="polygon" fill="#E34C26" stroke="#E34C26" stroke-width="5" points="10 10, 90 10, 85 95, 50 105, 15 95"/>
</svg>

【讨论】：