等量梯度与胜利图

Question

赏金将在 18 小时后到期。 此问题的答案有资格获得+250声望赏金。 user299791想引起对这个问题的更多关注。

我之前在这里问过一个关于如何使用胜利图创建线性渐变的问题，但现在我想知道是否也可以使用等量曲线构建渐变，如下图所示：

它应该与 CSS 中的径向梯度有关，但我无法弄清楚获得等量曲线的逻辑：

<svg>
        <defs>
          <radialGradient
            id="iso_gradient"
            // gradientTransform="rotate(10)"
          >
            <stop offset="0%" stopColor={colorScale[4]} />
            <stop offset="25%" stopColor={colorScale[4]} />
            <stop offset="25%" stopColor={colorScale[3]} />
            <stop offset="50%" stopColor={colorScale[3]} />
            <stop offset="50%" stopColor={colorScale[3]} />
            <stop offset="50%" stopColor={colorScale[2]} />
            <stop offset="75%" stopColor={colorScale[2]} />
            <stop offset="75%" stopColor={colorScale[1]} />
            <stop offset="90%" stopColor={colorScale[1]} />
            <stop offset="90%" stopColor={colorScale[0]} />
            <stop offset="100%" stopColor={colorScale[0]} />
          </radialGradient>
        </defs>
      </svg>

Answer 1

不知道渐变，但 svg 绝对可以。

<path stroke="blue" fill="none" d="M 10,0 C 15,85 15,85 100,90">

整个事情或多或少是这样的

 svg { width: 500px; height: 500px; background-color: #06b050; }

 <svg viewBox="0 0 100 100"> <path fill="#ffff00" d="M 10,0 C 15,85 15,85 100,90 L 100,0" /> <path fill="#fdc100" d="M 30,0 C 30,40 60,70 100,70 L 100,0" /> <path fill="#ff0000" d="M 50,0 C 55,15 85,45 100,50 L 100,0" /> <path fill="#bf0101" d="M 70,0 C 75,7 93,25 100,30 L 100,0" /> </svg>

https://www.w3schools.com/graphics/svg_path.asp