Могу ли я смешивать градиенты в SVG?

Вы можете сделать это с помощью SVG-фильтра, а также выполнить наложение «умножение», «растрирование», «осветление» или «затемнение». (Хотя он будет полностью корректно работать только в Chrome / Safari, потому что они поддерживают как импорт объектов в фильтры с feImage, так и правильный размер импорта feImage - если вы хотите, чтобы это работало и в Firefox, тогда используйте URI встроенных данных в качестве входных данных для feImage, а не ссылку на объект) Ниже приведен пример использования множественного смешивания:

<svg width="600px" height="600px" 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" width="400" height="400" fill="url(#wave)"/>
      <rect id="ry-rect" x="0" y="0" width="400" height="400" fill="url(#red-yellow)"/>
      <filter id="blend-it" x="0%" y="0%" width="100%" height="100%">
        <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>