我可以在svg中混合渐变吗？

您可以使用SVG滤镜执行此操作,并对混合进行乘法,屏幕显示,变亮或变暗.(虽然它只能在Chrome/Safari中完全正常工作,因为它们支持将对象导入到带有feImage的过滤器中,并且正确调整了feImage导入的大小 - 如果你想在Firefox中使用它,那么使用内联数据URI作为输入feImage而不是对象引用)下面是使用乘法混合的示例:

<svg   viewbox="0 0 600 600">
  <defs>
<linearGradient id="wave" x1="0%" x2="100%" y1="0%" y2="0%"
spreadMethod="pad">
    <stop offset="0%"   stop-color="gray" />
    <stop offset="25%"  stop-color="black"/>
    <stop offset="65%"  stop-color="white"/>
    <stop offset="100%" stop-color="gray" />
</linearGradient>
<linearGradient id="red-yellow" x1="0%" x2="100%" y1="0%" y2="100%"
spreadMethod="pad" gradientTransform="rotate(7)">
    <stop offset="0%"   stop-color="gold" />
    <stop offset="30%"  stop-color="gold"/>
    <stop offset="50%"  stop-color="red"/>
    <stop offset="100%" stop-color="red" />
</linearGradient>
     <rect id="wave-rect" x="0" y="0"   fill="url(#wave)"/>
      <rect id="ry-rect" x="0" y="0"   fill="url(#red-yellow)"/>
      <filter id="blend-it" x="0%" y="0%"  >
        <feImage xlink:href="#wave-rect" result="myWave" x="100" y="100"/>
        <feImage xlink:href="#ry-rect" result="myRY"  x="100" y="100"/>
        <feBlend in="myWave" in2="myRY" mode="multiply" result="blendedGrad"/>
        <feComposite in="blendedGrad" in2="SourceGraphic" operator="in"/>
    </filter>
  </defs>

  <circle filter="url(#blend-it)" cx="300" cy="300" r="200"/>

</svg>