svg中多点阴影滤波器的颜色控制

我正在尝试应用多个dropshadow效果-使用SVG，每个都有不同的颜色，我可以完美地定位元素，但我无法找出如何独立地为它们着色。下面是90%的阴影，但两个阴影的颜色相同：

    <svg className={style.svg} viewBox={`0 0 150 150`}>
      <defs>
        <filter id="drop-shadow" x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2" />

          <feColorMatrix
            in="offOut"
            type="matrix"
            values="0.2 0 0 0 0 0 0.2 0 0 1 0 0 0.2 0 0 0 0 0 1 0"
          />
          <feOffset dx="-5" dy="5" result="offsetblur" />
          <feOffset dx="10" dy="-10" result="offsetblur2" in="blur" />
          <feComponentTransfer result="shadow1" in="offsetblur">
            <feFuncA type="linear" slope="0.3" />
          </feComponentTransfer>
          <feComponentTransfer result="shadow2" in="offsetblur2">
            <feFuncA type="linear" slope="0.3" />
          </feComponentTransfer>
          <feMerge>
            <feMergeNode in="shadow1" />
            <feMergeNode in="shadow2" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <circle
        stroke="#ff00ff"
        fill="#ff00ff"
        cx=75
        cy=75
        r=55
        strokeWidth=15
        filter="url(#drop-shadow)"
      />

    </svg>

我从stack overflow的一个推荐答案中复制了这一点，但我无法根据我的特定目的对其进行调整。如何独立为每个阴影着色

---

提前感谢。

我使用feFuncR/G/B标签更改过滤器颜色，如下所示：

      <defs>
        <filter id="drop-shadow" x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
          <feOffset dx="-15" dy="15" result="offsetblur" />
          <feOffset dx="25" dy="-25" result="offsetblur2" in="blur" />
          <feComponentTransfer result="shadow1" in="offsetblur">
            <feFuncA type="linear" slope="0.3" />
          </feComponentTransfer>
          <feComponentTransfer result="shadow2" in="offsetblur2">
            <feFuncA type="linear" slope="0.2" />
            <feFuncR type="linear" slope="2.0" intercept="1" />
            <feFuncG type="linear" slope="2.0" intercept="1" />
            <feFuncB type="linear" slope="2.0" intercept="1" />
          </feComponentTransfer>
          <feMerge>
            <feMergeNode in="shadow1" />
            <feMergeNode in="shadow2" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

---

发布答案，以便帮助处于相同位置的其他人。

我使用feFuncR/G/B标签更改过滤器颜色，如下所示：

      <defs>
        <filter id="drop-shadow" x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
          <feOffset dx="-15" dy="15" result="offsetblur" />
          <feOffset dx="25" dy="-25" result="offsetblur2" in="blur" />
          <feComponentTransfer result="shadow1" in="offsetblur">
            <feFuncA type="linear" slope="0.3" />
          </feComponentTransfer>
          <feComponentTransfer result="shadow2" in="offsetblur2">
            <feFuncA type="linear" slope="0.2" />
            <feFuncR type="linear" slope="2.0" intercept="1" />
            <feFuncG type="linear" slope="2.0" intercept="1" />
            <feFuncB type="linear" slope="2.0" intercept="1" />
          </feComponentTransfer>
          <feMerge>
            <feMergeNode in="shadow1" />
            <feMergeNode in="shadow2" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

---

发布答案，以便帮助处于相同位置的其他人。

如果可以的话，使用颜色矩阵比使用组件传输更有效-浏览器可以在GPU上使用颜色矩阵。您还可以省去一些步骤，直接使用第五列指定颜色。SourceAlpha将颜色通道设置为零/黑色-因此对它们应用乘法器没有任何作用

---

如果可以的话，使用颜色矩阵比使用组件传输性能更好一些-浏览器可以在GPU上使用颜色矩阵。您还可以省去一些步骤，直接使用第五列指定颜色。SourceAlpha将颜色通道设置为零/黑色-因此对它们应用乘法器没有任何作用