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

Question

我有一个带有以下代码的线性渐变

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

现在我想增加中间颜色（即黄色）的高度。我试图增加黄色的偏移值，但颜色带向下移动，而不是增加宽度。我希望红色和绿色应该只包含以下格式的 SVG 高度的 10%

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

这是预期的颜色分布。

Answer 1

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

编辑基于娇气的骨质评论

.stop1 { stop-color: red; }
    .stop2 { stop-color: yellow; stop-opacity: 0.7; }
    .stop3 { stop-color: green; }

<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="20%"/>
    <stop class="stop2" offset="80%"/>
    <stop class="stop3" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="240" height="120" fill="url(#dsp)"/>
</svg>