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

在开始/结束站点和中间站点之间再添加两个站点...

编辑基于squeamish ossifrages评论

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: