Управление цветом нескольких фильтров тени в 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

Я скопировал это из одного из рекомендуемых ответов здесь при переполнении стека, но я не могу адаптировать его для своих конкретных c целей. Как раскрасить каждую тень независимо?

Заранее спасибо.

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

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

Отправка ответа, чтобы он мог помочь другим в той же позиции.