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

Question

我需要帮助

我正在尝试使用 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>

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

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

How do I change the transition level in SVG?

html

css

svg

css-transitions