SVGグラフィックスを使用してRGBカラーピッカーグラデーションを描画する方法

Question

カラーパレットで使用できるSVGグラフィックスを使用してRGBカラーモデルを描画したいと考えています。勾配の

画像がhere

1. を閲覧することができ、私はSVGを使用してグラデーションを描画しようとしましたが、期待通りの結果ではありません。
   

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=256 height=256 > 
 
    <defs> 
 
    <linearGradient id='magenta' x1=0% y1=0% x2=100% y2=100%> 
 
     <stop offset= 0% stop-color=#FF00FF stop-opacity=1></stop> 
 
     <stop offset= 100% stop-color=#FFFFFF stop-opacity=0></stop> 
 
    </linearGradient> 
 
    <linearGradient id='blue' x1=100% y1=0% x2=0% y2=100%> 
 
     <stop offset= 0% stop-color=#0000FF stop-opacity=1></stop> 
 
     <stop offset= 100% stop-color=#FFFFFF stop-opacity=0></stop> 
 
    </linearGradient> 
 
    <linearGradient id='red' x1=0% y1=100% x2=100% y2=0%> 
 
     <stop offset= 0% stop-color=#FF0000 stop-opacity=1></stop> 
 
     <stop offset= 100% stop-color=#FFFFFF stop-opacity=0></stop> 
 
    </linearGradient> 
 
    <linearGradient id='black' x1=100% y1=100% x2=0% y2=0%> 
 
     <stop offset= 0% stop-color=#000000 stop-opacity=1></stop> 
 
     <stop offset= 100% stop-color=#FFFFFF stop-opacity=0></stop> 
 
    </linearGradient> 
 
</defs> 
 
<rect x=0 y=0 width=100% height=100% fill="url(#magenta)"></rect> 
 
<rect x=0 y=0 width=100% height=100% fill="url(#blue)"></rect> 
 
<rect x=0 y=0 width=100% height=100% fill="url(#red)"></rect> 
 
<rect x=0 y=0 width=100% height=100% fill="url(#black)"></rect> 
 
</svg>

This postそれはCSSを使用して行うことができる方法を説明します。 SVG Graphicsを使ってこのグラデーションを描く方法を知りたい。

Answer 1

ここではSVGを使って説明します。それは私たちは二つの主なグラデーションを組み合わせ

仕組み

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256"> 
 
    <defs> 
 
    <linearGradient id="magred" x1="0%" y1="0%" x2="0%" y2="100%"> 
 
     <stop offset="0%" stop-color="#FF00FF"></stop> 
 
     <stop offset="100%" stop-color="#FF0000"></stop> 
 
    </linearGradient> 
 
    <linearGradient id="magblue" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" stop-color="#FF00FF"></stop> 
 
     <stop offset="100%" stop-color="#0000FF"></stop> 
 
    </linearGradient> 
 
    <linearGradient id="magredmaskgrad" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" stop-color="#FFFFFF"></stop> 
 
     <stop offset="100%" stop-color="#000000"></stop> 
 
    </linearGradient> 
 
    <linearGradient id="magbluemaskgrad" x1="0%" y1="0%" x2="0%" y2="100%"> 
 
     <stop offset="0%" stop-color="#FFFFFF"></stop> 
 
     <stop offset="100%" stop-color="#000000"></stop> 
 
    </linearGradient> 
 
    <mask id="magredmask"> 
 
     <rect x=0 y=0 width=100% height=100% fill="url(#magredmaskgrad)"/> 
 
    </mask> 
 
    <mask id="magbluemask"> 
 
     <rect x=0 y=0 width=100% height=100% fill="url(#magbluemaskgrad)"/> 
 
    </mask> 
 
</defs> 
 
<rect x=0 y=0 width=100% height=100% fill="black"/> 
 
<rect x=0 y=0 width=100% height=100% fill="url(#magred)" 
 
     mask="url(#magredmask)"/> 
 
<rect x=0 y=0 width=100% height=100% fill="url(#magblue)" 
 
     mask="url(#magbluemask)"/> 
 
</svg>

。それぞれには、色勾配に対して垂直に目盛り付きの透明マスクがあります。

まず、上から下に向かって赤か​​ら赤へのグラデーションがあります。その透明度は、左の不透明から右の透明まで実行されます。

さらに、左から右に向かって、マゼンタからブルーの勾配があります。その透明度は、上端が不透明で、下端が透明になります。

右下に黒を表示するには、その後ろに黒い四角を挿入します。