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

【问题标题】：Linear Gradient SVG 3 colors increase the width of the middle color线性渐变 SVG 3 种颜色增加中间颜色的宽度
【发布时间】：2017-05-20 21:18:01
【问题描述】：

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

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

这是预期的颜色分布。

【问题讨论】：

Codepen ?
或者这个：codepen.io/anon/pen/pRvXMM?editors=1000?
您想要渐变色还是三条纹？如果它是一个渐变，那么你将不会得到这样一个加起来为 100 的分割。会有部分颜色介于红色和黄色之间，部分颜色介于红色和黄色之间。
@harry 如果您重复停止位置，如果您需要的话，您可以获得清晰的颜色过渡。
@Harry 我明白了，希望 OP 也能做到 :-)

标签： html css svg

【解决方案1】：

只需在开始/结束停靠点和中间添加两个停靠点...

根据 squeamish ossifrages 评论进行编辑

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

【讨论】：

没有必要在 50% 处停止。