Html 线性渐变SVG 3颜色增加中间颜色的宽度

我有一个线性梯度和下面的代码

<svg width="120" height="240" >
  <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1">
    <stop class="stop1" offset="0%"/>
    <stop class="stop2" offset="50%"/>
    <stop class="stop3" offset="100%"/>
  </linearGradient>
  <style type="text/css">
    .stop1 { stop-color: red; }
    .stop2 { stop-color: yellow; stop-opacity: 0.7; }
    .stop3 { stop-color: green; }
  </style>

---

这是预期的颜色分布。

只需在开始/结束停止和中间之间再添加两个停止

根据吱吱作响的ossifrages评论进行编辑

.stop1{停止颜色：红色；}
.stop2{停止颜色：黄色；停止不透明度：0.7；}
.stop3{停止颜色：绿色；}

？或者这个：？你想要渐变色还是三条条纹？如果它是一个梯度，那么你将不会得到这样一个加起来等于100的分割。有些部分的颜色介于红色和黄色之间，有些部分的颜色介于红色和黄色和绿色之间。@harry如果你重复停止位置，你可以得到一个清晰的颜色转换，如果你需要的话。@harry我明白了，希望OP也这样做：-）50%的停止是不必要的。

Red >> 15%
yellow >>  70%
green >> 15%