等量梯度与胜利图

Question

编辑: svg。代码很好地回答了我的问题，但我很难将它添加到胜利图表中。

<svg
        style={{
          height: 0,
          width: 0,
        }}
        >
        <defs>
          <linearGradient
            viewBox="0 0 100 100"
            backgroundColor="#06b050"
            id="iso_gradient"
          >
            <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" />
          </linearGradient>
        </defs>
      </svg>
      <VictoryChart
        domain={{ y: domain }}
        theme={VictoryTheme.material}
        tickFormat={(tick) => `${tick}`}
        width={width}
        height={height}
        style={{
          background: {
            fill: "url(#iso_gradient)",
          },
        }}
        backgroundComponent={<Background />}
      >
        <VictoryAxis tickValues={tickxValues} tickFormat={tickxFormat} />
        <VictoryAxis
          dependentAxis
          tickValues={tickyValues}
          tickFormat={tickyFormat}
        />
        <VictoryScatter data={data} x={xaxis} y={yaxis} />
      </VictoryChart>

我问了一个问题，如何用以前的here胜利图创建一个线性梯度，但现在我想知道是否也可以用isoquant曲线构建一个梯度，如下图所示：

​

​

它应该与CSS中的径向梯度相关，但我无法理解获得isoquant曲线的逻辑：

<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