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

Question

我想用两个渐变填充SVG形状,其中一个与另一个呈45度角:

<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>

有没有办法混合(乘)这些渐变？最终结果应该是一个矩形(或任意形状),从左上角的'gold'变为右下角的'red',并且值(如HSV中)从中到高从高变为中到高左到右.

Answer 1

您可以使用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>