CSSグラジエントパスはどのように計算されますか？

Question

よう

div { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: linear-gradient(to right, blue, red); 
 
}

<div></div>

として直線勾配を使用した場合の色が異なる経路を介して変更することができます。上記の例で

は、それがG一つに触れることなく、単に直線RとBチャネルを変更することによって行うことができる - しかし、変動も（たとえば、線形性の感覚を提供するために非線形であってもよいですより生理学的であるため）、またはGチャンネルで微妙に調整することによって（これはやはり、より現実的な「赤から青への移行」のように見えるかもしれません）。

2色の切り替えにlinear-gradientで使用されている式は何ですか？

Answer 1

HTML/CSSのグラディエントは、純粋に数学的な線形補間です。 W3Cキャンバス仕様で

グラデーションが作成されたら（下を参照）、それに沿ってストップが配置され、グラデーションに沿って色がどのように分布するかを定義します。各停止時の勾配の色は、その停止に対して指定された色です。このような停止の間では、アルファ値を事前に乗算することなく、そのオフセットで使用する色を見つけることなく、色およびアルファ成分をRGBA空間上で線形補間する必要があります。最初の停止の前に、色は最初の停止の色でなければなりません。最後の停止後、色は最後の停止の色でなければなりません。停止がない場合、グラデーションは透明な黒です。

SVGも同様です。

CSSグラデーションが1差（強調鉱山）を除いて、同じです。

2間の色の停止、ラインの色は補間がで行われていると、2つのカラーストップの色の間に補間されます事前に掛けられたRGBAスペース。

したがって、3つすべて線形補間を使用し、キャンバス/ SVGは非プレミディアルファアルファを使用しますが、CSSはプリミティブアルファを使用します（これは見た目がよさそうです）。それが違いを理由として、この例を参照してください。

html, body, svg, div { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: white; 
 
} 
 
svg {height: 60%;} 
 
div.gradient { 
 
    height: 20%; 
 
    margin-top: 0.2%; 
 
    background: linear-gradient(to right, 
 
    rgba(0%, 100%, 0%, 1), 
 
    rgba(0,0,0,0)); 
 
}

<svg> 
 
    <linearGradient id="a"> 
 
    <stop offset="0" stop-color="lime" 
 
     stop-opacity="1" /> 
 
    <stop offset="1" stop-color="lime" 
 
     stop-opacity="0" /> 
 
    </linearGradient> 
 
    <linearGradient id="b"> 
 
    <stop offset="0" stop-color="lime" 
 
     stop-opacity="1" /> 
 
    <stop offset="1" stop-color="black" 
 
     stop-opacity="0" /> 
 
    </linearGradient> 
 
    <linearGradient id="c"> 
 
    <stop offset="0" stop-color="rgba(0%, 100%, 0%, 1)" /> 
 
    <stop offset="1" stop-color="rgba(0,0,0,0)" /> 
 
    </linearGradient> 
 
    <rect width="100%" height="33%" 
 
    fill="url(#a)" /> 
 
    <rect width="100%" height="33%" y="33.5%" 
 
    fill="url(#b)" /> 
 
    <rect width="100%" height="33%" y="67%" 
 
    fill="url(#c)" /> 
 
</svg> 
 
<div class="gradient"></div> 
 
<ul> 
 
    <li>Top: SVG gradient with constant stop-color and transitioned stop-opacity;</li> 
 
    <li>2nd: SVG gradient with stop-color transitioning to black and stop-opacity transitioning to zero;</li> 
 
    <li>3rd: SVG gradient with rgba colors;</li> 
 
    <li>Bottom: CSS gradient with the same rgba colors.</li> 
 
</ul> 
 
<p>All transition from opaque lime to fully transparent; in all but the first SVG gradient, the final stop is transparent black. The CSS gradient scales the intensity of the color by the alpha value before transitioning, so you don't get the fade to gray effect.</p>

免責事項：私のスニペットはないこと！私はこれをCodePen exampleから取り出しましたが、コードを自分で追加しなくてもそれにリンクすることはできません。