控制svg中多个阴影滤镜的颜色答案

【问题标题】：Control the colour of multiple drop shadow filter in svg控制svg中多个阴影滤镜的颜色
【发布时间】：2020-08-08 00:42:42
【问题描述】：

我正在尝试应用多个阴影效果 - 每个都使用 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>

CODEPEN

我从堆栈溢出的推荐答案之一here 中复制了此内容，但我无法针对我的特定目的对其进行定制。如何为每个阴影单独着色？

提前致谢。

【问题讨论】：

标签： svg vector graphics visualization

【解决方案1】：

如果可以的话，使用颜色矩阵与组件传输相比性能更高一些 - 浏览器可以在 GPU 上执行颜色矩阵。您也可以省去几个步骤，直接使用第五列指定颜色。 SourceAlpha 将颜色通道设置为零/黑色 - 因此应用乘数它们不会做任何事情。

<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
              type="matrix"
              values="0 0 0 0 0   0 0 0 0 1   0 0 0 0 0  0 0 0 0.3 0"
            />
          <feOffset dx="-5" dy="5" result="shadow1" />
          <feOffset dx="10" dy="-10" result="offsetblur2" />
          <feColorMatrix type="matrix" result="shadow2"
              values="0 0 0 0 1  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
            />            
          </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>

【讨论】：

【解决方案2】：

我使用 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>

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

【讨论】：