如何使用 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 图形绘制这个渐变。

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>

工作原理

我们结合了两个主要的渐变。每个都有一个渐变的透明蒙版，垂直于颜色渐变。

首先有一个从上到下的洋红色到红色渐变。它的透明度从左边的不透明到右边的透明。

最重要的是从左到右运行的洋红色到蓝色渐变。它的透明度从顶部不透明到底部透明。

为了在右下角提供黑色，我们在它们后面插入一个黑色方块。