如何更改SVG中的转换级别

我需要帮助

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

您应该在等于起始颜色的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>

相关内容

最新更新

热门标签：