線性漸變SVG 3種顏色增加中間色的寬度

我有下面的代碼的線性梯度線性漸變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>

現在我想增加中間顏色是高度黃色。我試圖增加黃色的偏移值，但不是增加寬度，而是色帶向下移動。我想，紅色和綠色應該只包含10％的SVG的高度以下格式

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

這是預期的顏色分佈。

來源

2017-01-06 Rakesh

[Codepen]（ https://codepen.io/anon/pen/egmwqN?editors=1000）？ –

或者這個：https://codepen.io/anon/pen/pRvXMM?editors=1000？ –

你想要一個漸變或三個條紋？如果它是一個漸變，那麼你將不會得到這樣的分割，這將增加到100.將會有部分是紅色和黃色之間的顏色，而部分將是紅色黃色和綠色之間。 – Harry

只是增加兩個停在起點/終點停止，這中間...

編輯基於嬌氣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>

來源

2017-01-06 07:46:13

50％的停止是不必要的。 –

你是絕對正確的......糾正！ –

線性漸變SVG 3種顏色增加中間色的寬度

回答

相關問題