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中的过渡级别？

1 个答案: