控制 svg 中多个投影滤镜的颜色

Question

我正在尝试应用多种阴影效果 - 使用 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 中复制了这个，但我无法根据我的特定目的对其进行定制。如何单独为每个阴影着色？

提前致谢。

Answer 1

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

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

Answer 2

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

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

控制 svg 中多个投影滤镜的颜色

Control the colour of multiple drop shadow filter in svg

graphics

svg

visualization

vector